<!DOCTYPE html>
<html lang="en-US" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>级联选择 Cascader | BIN-UI-DESIGN</title>
    <meta name="description" content="A Compontnts Lib for Vue3">
    <link rel="preload stylesheet" href="/bin-ui-design/assets/style.c1bcbbc4.css" as="style">
    
    <script type="module" src="/bin-ui-design/assets/app.e7678c4e.js"></script>
    <link rel="preload" href="/bin-ui-design/assets/inter-roman-latin.2ed14f66.woff2" as="font" type="font/woff2" crossorigin="">
    <link rel="modulepreload" href="/bin-ui-design/assets/chunks/framework.ef1b8cce.js">
    <link rel="modulepreload" href="/bin-ui-design/assets/chunks/theme.feefc56e.js">
    <link rel="modulepreload" href="/bin-ui-design/assets/chunks/preset.a505c3e9.js">
    <link rel="modulepreload" href="/bin-ui-design/assets/chunks/dayjs.min.04d70162.js">
    <link rel="modulepreload" href="/bin-ui-design/assets/components_cascader.md.9ad54021.lean.js">
    <link rel="icon" href="/bin-ui-design/favicon.ico">
    <script id="check-dark-light">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
  </head>
  <body><div class="bin-cascader__dropdown bin-popper is-light is-pure" style="z-index:2161;display:none;" id="bin-popper-873" role="tooltip"><!--[--><div class="bin-cascader-panel"><!--[--><div class="bin-scrollbar bin-cascader-menu" id="cascader-menu-4607-0" role="menu"><div class="bin-cascader-menu__wrap bin-scrollbar__wrap bin-scrollbar__wrap--hidden-default" style=""><ul class="bin-scrollbar__view bin-cascader-menu__list" style=""><!--[--><!--[--><li id="cascader-menu-4607-0-0" role="menuitem" aria-haspopup="true" aria-owns="cascader-menu-4607-0" aria-expanded="false" tabindex="-1" class="bin-cascader-node"><!----><span class="bin-cascader-node__label">南京</span><!--[--><i class="b-iconfont b-icon-right bin-cascader-node__postfix"></i><!--]--></li><li id="cascader-menu-4607-0-4" role="menuitem" aria-haspopup="true" aria-owns="cascader-menu-4607-0" aria-expanded="false" tabindex="-1" class="bin-cascader-node"><!----><span class="bin-cascader-node__label">徐州</span><!--[--><i class="b-iconfont b-icon-right bin-cascader-node__postfix"></i><!--]--></li><!--]--><!----><!--]--></ul></div><!--[--><div class="bin-scrollbar__bar is-horizontal" style=""><div class="bin-scrollbar__thumb" style="width:0;transform:translateX(0%);ms-transform:translateX(0%);webkit-transform:translateX(0%);"></div></div><div class="bin-scrollbar__bar is-vertical" style=""><div class="bin-scrollbar__thumb" style="height:0;transform:translateY(0%);ms-transform:translateY(0%);webkit-transform:translateY(0%);"></div></div><!--]--></div><!--]--></div><!----><!--]--><!----></div><!--teleport anchor--><div class="bin-cascader__dropdown bin-popper is-light is-pure" style="z-index:2162;display:none;" id="bin-popper-9397" role="tooltip"><!--[--><div class="bin-cascader-panel"><!--[--><div class="bin-scrollbar bin-cascader-menu" id="cascader-menu-9057-0" role="menu"><div class="bin-cascader-menu__wrap bin-scrollbar__wrap bin-scrollbar__wrap--hidden-default" style=""><ul class="bin-scrollbar__view bin-cascader-menu__list" style=""><!--[--><!--[--><li id="cascader-menu-9057-0-17" role="menuitem" aria-haspopup="true" aria-owns="cascader-menu-9057-0" aria-expanded="false" tabindex="-1" class="bin-cascader-node"><!----><span class="bin-cascader-node__label">南京</span><!--[--><i class="b-iconfont b-icon-right bin-cascader-node__postfix"></i><!--]--></li><li id="cascader-menu-9057-0-21" role="menuitem" aria-haspopup="true" aria-owns="cascader-menu-9057-0" aria-expanded="false" tabindex="-1" class="bin-cascader-node"><!----><span class="bin-cascader-node__label">徐州</span><!--[--><i class="b-iconfont b-icon-right bin-cascader-node__postfix"></i><!--]--></li><!--]--><svg class="bin-cascader-menu__hover-zone"></svg><!--]--></ul></div><!--[--><div class="bin-scrollbar__bar is-horizontal" style=""><div class="bin-scrollbar__thumb" style="width:0;transform:translateX(0%);ms-transform:translateX(0%);webkit-transform:translateX(0%);"></div></div><div class="bin-scrollbar__bar is-vertical" style=""><div class="bin-scrollbar__thumb" style="height:0;transform:translateY(0%);ms-transform:translateY(0%);webkit-transform:translateY(0%);"></div></div><!--]--></div><!--]--></div><!----><!--]--><!----></div><!--teleport anchor--><div class="bin-cascader__dropdown bin-popper is-light is-pure" style="z-index:2163;display:none;" id="bin-popper-3640" role="tooltip"><!--[--><div class="bin-cascader-panel"><!--[--><div class="bin-scrollbar bin-cascader-menu" id="cascader-menu-3516-0" role="menu"><div class="bin-cascader-menu__wrap bin-scrollbar__wrap bin-scrollbar__wrap--hidden-default" style=""><ul class="bin-scrollbar__view bin-cascader-menu__list" style=""><!--[--><!--[--><li id="cascader-menu-3516-0-34" role="menuitem" aria-haspopup="true" aria-owns="cascader-menu-3516-0" aria-expanded="false" class="bin-cascader-node is-disabled"><!----><span class="bin-cascader-node__label">南京</span><!--[--><i class="b-iconfont b-icon-right bin-cascader-node__postfix"></i><!--]--></li><li id="cascader-menu-3516-0-38" role="menuitem" aria-haspopup="true" aria-owns="cascader-menu-3516-0" aria-expanded="false" tabindex="-1" class="bin-cascader-node"><!----><span class="bin-cascader-node__label">徐州</span><!--[--><i class="b-iconfont b-icon-right bin-cascader-node__postfix"></i><!--]--></li><!--]--><!----><!--]--></ul></div><!--[--><div class="bin-scrollbar__bar is-horizontal" style=""><div class="bin-scrollbar__thumb" style="width:0;transform:translateX(0%);ms-transform:translateX(0%);webkit-transform:translateX(0%);"></div></div><div class="bin-scrollbar__bar is-vertical" style=""><div class="bin-scrollbar__thumb" style="height:0;transform:translateY(0%);ms-transform:translateY(0%);webkit-transform:translateY(0%);"></div></div><!--]--></div><!--]--></div><!----><!--]--><!----></div><!--teleport anchor--><div class="bin-cascader__dropdown bin-popper is-light is-pure" style="z-index:2164;display:none;" id="bin-popper-5974" role="tooltip"><!--[--><div class="bin-cascader-panel"><!--[--><div class="bin-scrollbar bin-cascader-menu" id="cascader-menu-3675-0" role="menu"><div class="bin-cascader-menu__wrap bin-scrollbar__wrap bin-scrollbar__wrap--hidden-default" style=""><ul class="bin-scrollbar__view bin-cascader-menu__list" style=""><!--[--><!--[--><li id="cascader-menu-3675-0-51" role="menuitem" aria-haspopup="true" aria-owns="cascader-menu-3675-0" aria-expanded="false" class="bin-cascader-node is-disabled"><!----><span class="bin-cascader-node__label">南京</span><!--[--><i class="b-iconfont b-icon-right bin-cascader-node__postfix"></i><!--]--></li><li id="cascader-menu-3675-0-55" role="menuitem" aria-haspopup="true" aria-owns="cascader-menu-3675-0" aria-expanded="false" tabindex="-1" class="bin-cascader-node"><!----><span class="bin-cascader-node__label">徐州</span><!--[--><i class="b-iconfont b-icon-right bin-cascader-node__postfix"></i><!--]--></li><!--]--><!----><!--]--></ul></div><!--[--><div class="bin-scrollbar__bar is-horizontal" style=""><div class="bin-scrollbar__thumb" style="width:0;transform:translateX(0%);ms-transform:translateX(0%);webkit-transform:translateX(0%);"></div></div><div class="bin-scrollbar__bar is-vertical" style=""><div class="bin-scrollbar__thumb" style="height:0;transform:translateY(0%);ms-transform:translateY(0%);webkit-transform:translateY(0%);"></div></div><!--]--></div><!--]--></div><!----><!--]--><!----></div><!--teleport anchor--><div class="bin-cascader__dropdown bin-popper is-light is-pure" style="z-index:2165;display:none;" id="bin-popper-4647" role="tooltip"><!--[--><div class="bin-cascader-panel"><!--[--><div class="bin-scrollbar bin-cascader-menu" id="cascader-menu-7209-0" role="menu"><div class="bin-cascader-menu__wrap bin-scrollbar__wrap bin-scrollbar__wrap--hidden-default" style=""><ul class="bin-scrollbar__view bin-cascader-menu__list" style=""><!--[--><!--[--><li id="cascader-menu-7209-0-68" role="menuitem" aria-haspopup="true" aria-owns="cascader-menu-7209-0" aria-expanded="false" tabindex="-1" class="bin-cascader-node"><!----><span class="bin-cascader-node__label">南京</span><!--[--><i class="b-iconfont b-icon-right bin-cascader-node__postfix"></i><!--]--></li><li id="cascader-menu-7209-0-72" role="menuitem" aria-haspopup="true" aria-owns="cascader-menu-7209-0" aria-expanded="false" tabindex="-1" class="bin-cascader-node"><!----><span class="bin-cascader-node__label">徐州</span><!--[--><i class="b-iconfont b-icon-right bin-cascader-node__postfix"></i><!--]--></li><!--]--><!----><!--]--></ul></div><!--[--><div class="bin-scrollbar__bar is-horizontal" style=""><div class="bin-scrollbar__thumb" style="width:0;transform:translateX(0%);ms-transform:translateX(0%);webkit-transform:translateX(0%);"></div></div><div class="bin-scrollbar__bar is-vertical" style=""><div class="bin-scrollbar__thumb" style="height:0;transform:translateY(0%);ms-transform:translateY(0%);webkit-transform:translateY(0%);"></div></div><!--]--></div><!--]--></div><!----><!--]--><!----></div><!--teleport anchor--><div class="bin-cascader__dropdown bin-popper is-light is-pure" style="z-index:2166;display:none;" id="bin-popper-684" role="tooltip"><!--[--><div class="bin-cascader-panel"><!--[--><div class="bin-scrollbar bin-cascader-menu" id="cascader-menu-8074-0" role="menu"><div class="bin-cascader-menu__wrap bin-scrollbar__wrap bin-scrollbar__wrap--hidden-default" style=""><ul class="bin-scrollbar__view bin-cascader-menu__list" style=""><!--[--><!--[--><li id="cascader-menu-8074-0-85" role="menuitem" aria-haspopup="true" aria-owns="cascader-menu-8074-0" aria-expanded="false" tabindex="-1" class="bin-cascader-node"><!----><span class="bin-cascader-node__label">南京</span><!--[--><i class="b-iconfont b-icon-right bin-cascader-node__postfix"></i><!--]--></li><li id="cascader-menu-8074-0-89" role="menuitem" aria-haspopup="true" aria-owns="cascader-menu-8074-0" aria-expanded="false" tabindex="-1" class="bin-cascader-node"><!----><span class="bin-cascader-node__label">徐州</span><!--[--><i class="b-iconfont b-icon-right bin-cascader-node__postfix"></i><!--]--></li><!--]--><!----><!--]--></ul></div><!--[--><div class="bin-scrollbar__bar is-horizontal" style=""><div class="bin-scrollbar__thumb" style="width:0;transform:translateX(0%);ms-transform:translateX(0%);webkit-transform:translateX(0%);"></div></div><div class="bin-scrollbar__bar is-vertical" style=""><div class="bin-scrollbar__thumb" style="height:0;transform:translateY(0%);ms-transform:translateY(0%);webkit-transform:translateY(0%);"></div></div><!--]--></div><!--]--></div><!----><!--]--><!----></div><!--teleport anchor--><div class="bin-cascader__dropdown bin-popper is-light is-pure" style="z-index:2167;display:none;" id="bin-popper-6413" role="tooltip"><!--[--><div class="bin-cascader-panel"><!--[--><div class="bin-scrollbar bin-cascader-menu" id="cascader-menu-3581-0" role="menu"><div class="bin-cascader-menu__wrap bin-scrollbar__wrap bin-scrollbar__wrap--hidden-default" style=""><ul class="bin-scrollbar__view bin-cascader-menu__list" style=""><!--[--><!--[--><li id="cascader-menu-3581-0-102" role="menuitem" aria-haspopup="true" aria-owns="cascader-menu-3581-0" aria-expanded="false" tabindex="-1" class="bin-cascader-node"><label class="bin-checkbox"><span class="bin-checkbox__input" tabindex="false" role="false" aria-checked="false"><span class="bin-checkbox__inner"></span><input class="bin-checkbox__original" type="checkbox" aria-hidden="false" value="false"></span><!----></label><span class="bin-cascader-node__label">南京</span><!--[--><i class="b-iconfont b-icon-right bin-cascader-node__postfix"></i><!--]--></li><li id="cascader-menu-3581-0-106" role="menuitem" aria-haspopup="true" aria-owns="cascader-menu-3581-0" aria-expanded="false" tabindex="-1" class="bin-cascader-node"><label class="bin-checkbox"><span class="bin-checkbox__input" tabindex="false" role="false" aria-checked="false"><span class="bin-checkbox__inner"></span><input class="bin-checkbox__original" type="checkbox" aria-hidden="false" value="false"></span><!----></label><span class="bin-cascader-node__label">徐州</span><!--[--><i class="b-iconfont b-icon-right bin-cascader-node__postfix"></i><!--]--></li><!--]--><!----><!--]--></ul></div><!--[--><div class="bin-scrollbar__bar is-horizontal" style=""><div class="bin-scrollbar__thumb" style="width:0;transform:translateX(0%);ms-transform:translateX(0%);webkit-transform:translateX(0%);"></div></div><div class="bin-scrollbar__bar is-vertical" style=""><div class="bin-scrollbar__thumb" style="height:0;transform:translateY(0%);ms-transform:translateY(0%);webkit-transform:translateY(0%);"></div></div><!--]--></div><!--]--></div><!----><!--]--><!----></div><!--teleport anchor--><div class="bin-cascader__dropdown bin-popper is-light is-pure" style="z-index:2168;display:none;" id="bin-popper-6403" role="tooltip"><!--[--><div class="bin-cascader-panel"><!--[--><div class="bin-scrollbar bin-cascader-menu" id="cascader-menu-9618-0" role="menu"><div class="bin-cascader-menu__wrap bin-scrollbar__wrap bin-scrollbar__wrap--hidden-default" style=""><ul class="bin-scrollbar__view bin-cascader-menu__list" style=""><!--[--><!--[--><li id="cascader-menu-9618-0-119" role="menuitem" aria-haspopup="true" aria-owns="cascader-menu-9618-0" aria-expanded="false" tabindex="-1" class="bin-cascader-node"><label class="bin-checkbox"><span class="bin-checkbox__input" tabindex="false" role="false" aria-checked="false"><span class="bin-checkbox__inner"></span><input class="bin-checkbox__original" type="checkbox" aria-hidden="false" value="false"></span><!----></label><span class="bin-cascader-node__label">南京</span><!--[--><i class="b-iconfont b-icon-right bin-cascader-node__postfix"></i><!--]--></li><li id="cascader-menu-9618-0-123" role="menuitem" aria-haspopup="true" aria-owns="cascader-menu-9618-0" aria-expanded="false" tabindex="-1" class="bin-cascader-node"><label class="bin-checkbox"><span class="bin-checkbox__input" tabindex="false" role="false" aria-checked="false"><span class="bin-checkbox__inner"></span><input class="bin-checkbox__original" type="checkbox" aria-hidden="false" value="false"></span><!----></label><span class="bin-cascader-node__label">徐州</span><!--[--><i class="b-iconfont b-icon-right bin-cascader-node__postfix"></i><!--]--></li><!--]--><!----><!--]--></ul></div><!--[--><div class="bin-scrollbar__bar is-horizontal" style=""><div class="bin-scrollbar__thumb" style="width:0;transform:translateX(0%);ms-transform:translateX(0%);webkit-transform:translateX(0%);"></div></div><div class="bin-scrollbar__bar is-vertical" style=""><div class="bin-scrollbar__thumb" style="height:0;transform:translateY(0%);ms-transform:translateY(0%);webkit-transform:translateY(0%);"></div></div><!--]--></div><!--]--></div><!----><!--]--><!----></div><!--teleport anchor--><div class="bin-cascader__dropdown bin-popper is-light is-pure" style="z-index:2169;display:none;" id="bin-popper-619" role="tooltip"><!--[--><div class="bin-cascader-panel"><!--[--><div class="bin-scrollbar bin-cascader-menu" id="cascader-menu-1938-0" role="menu"><div class="bin-cascader-menu__wrap bin-scrollbar__wrap bin-scrollbar__wrap--hidden-default" style=""><ul class="bin-scrollbar__view bin-cascader-menu__list" style=""><!--[--><!--[--><li id="cascader-menu-1938-0-136" role="menuitem" aria-haspopup="true" aria-owns="cascader-menu-1938-0" aria-expanded="false" tabindex="-1" class="bin-cascader-node is-selectable"><label class="bin-radio" role="radio" aria-checked="false" tabindex="0"><span class="bin-radio__input"><span class="bin-radio__inner"></span><input class="bin-radio__original" value="136" type="radio" name="" tabindex="-1"></span><span class="bin-radio__label"><!--[--><span></span><!--]--><!----></span></label><span class="bin-cascader-node__label">南京</span><!--[--><i class="b-iconfont b-icon-right bin-cascader-node__postfix"></i><!--]--></li><li id="cascader-menu-1938-0-140" role="menuitem" aria-haspopup="true" aria-owns="cascader-menu-1938-0" aria-expanded="false" tabindex="-1" class="bin-cascader-node is-selectable"><label class="bin-radio" role="radio" aria-checked="false" tabindex="0"><span class="bin-radio__input"><span class="bin-radio__inner"></span><input class="bin-radio__original" value="140" type="radio" name="" tabindex="-1"></span><span class="bin-radio__label"><!--[--><span></span><!--]--><!----></span></label><span class="bin-cascader-node__label">徐州</span><!--[--><i class="b-iconfont b-icon-right bin-cascader-node__postfix"></i><!--]--></li><!--]--><!----><!--]--></ul></div><!--[--><div class="bin-scrollbar__bar is-horizontal" style=""><div class="bin-scrollbar__thumb" style="width:0;transform:translateX(0%);ms-transform:translateX(0%);webkit-transform:translateX(0%);"></div></div><div class="bin-scrollbar__bar is-vertical" style=""><div class="bin-scrollbar__thumb" style="height:0;transform:translateY(0%);ms-transform:translateY(0%);webkit-transform:translateY(0%);"></div></div><!--]--></div><!--]--></div><!----><!--]--><!----></div><!--teleport anchor--><div class="bin-cascader__dropdown bin-popper is-light is-pure" style="z-index:2170;display:none;" id="bin-popper-2239" role="tooltip"><!--[--><div class="bin-cascader-panel"><!--[--><div class="bin-scrollbar bin-cascader-menu" id="cascader-menu-5343-0" role="menu"><div class="bin-cascader-menu__wrap bin-scrollbar__wrap bin-scrollbar__wrap--hidden-default" style=""><ul class="bin-scrollbar__view bin-cascader-menu__list" style=""><!--[--><!--[--><li id="cascader-menu-5343-0-153" role="menuitem" aria-haspopup="true" aria-owns="cascader-menu-5343-0" aria-expanded="false" tabindex="-1" class="bin-cascader-node is-selectable"><label class="bin-checkbox"><span class="bin-checkbox__input" tabindex="false" role="false" aria-checked="false"><span class="bin-checkbox__inner"></span><input class="bin-checkbox__original" type="checkbox" aria-hidden="false" value="false"></span><!----></label><span class="bin-cascader-node__label">南京</span><!--[--><i class="b-iconfont b-icon-right bin-cascader-node__postfix"></i><!--]--></li><li id="cascader-menu-5343-0-157" role="menuitem" aria-haspopup="true" aria-owns="cascader-menu-5343-0" aria-expanded="false" tabindex="-1" class="bin-cascader-node is-selectable"><label class="bin-checkbox"><span class="bin-checkbox__input" tabindex="false" role="false" aria-checked="false"><span class="bin-checkbox__inner"></span><input class="bin-checkbox__original" type="checkbox" aria-hidden="false" value="false"></span><!----></label><span class="bin-cascader-node__label">徐州</span><!--[--><i class="b-iconfont b-icon-right bin-cascader-node__postfix"></i><!--]--></li><!--]--><!----><!--]--></ul></div><!--[--><div class="bin-scrollbar__bar is-horizontal" style=""><div class="bin-scrollbar__thumb" style="width:0;transform:translateX(0%);ms-transform:translateX(0%);webkit-transform:translateX(0%);"></div></div><div class="bin-scrollbar__bar is-vertical" style=""><div class="bin-scrollbar__thumb" style="height:0;transform:translateY(0%);ms-transform:translateY(0%);webkit-transform:translateY(0%);"></div></div><!--]--></div><!--]--></div><!----><!--]--><!----></div><!--teleport anchor--><div class="bin-cascader__dropdown bin-popper is-light is-pure" style="z-index:2171;display:none;" id="bin-popper-9862" role="tooltip"><!--[--><div class="bin-cascader-panel"><!--[--><div class="bin-scrollbar bin-cascader-menu" id="cascader-menu-5402-0" role="menu"><div class="bin-cascader-menu__wrap bin-scrollbar__wrap bin-scrollbar__wrap--hidden-default" style=""><ul class="bin-scrollbar__view bin-cascader-menu__list is-empty" style=""><!--[--><!--[--><!--]--><div class="bin-cascader-menu__empty-text">暂无数据</div><!--]--></ul></div><!--[--><div class="bin-scrollbar__bar is-horizontal" style=""><div class="bin-scrollbar__thumb" style="width:0;transform:translateX(0%);ms-transform:translateX(0%);webkit-transform:translateX(0%);"></div></div><div class="bin-scrollbar__bar is-vertical" style=""><div class="bin-scrollbar__thumb" style="height:0;transform:translateY(0%);ms-transform:translateY(0%);webkit-transform:translateY(0%);"></div></div><!--]--></div><!--]--></div><!----><!--]--><!----></div><!--teleport anchor--><div class="bin-cascader__dropdown bin-popper is-light is-pure" style="z-index:2172;display:none;" id="bin-popper-3412" role="tooltip"><!--[--><div class="bin-cascader-panel"><!--[--><div class="bin-scrollbar bin-cascader-menu" id="cascader-menu-2652-0" role="menu"><div class="bin-cascader-menu__wrap bin-scrollbar__wrap bin-scrollbar__wrap--hidden-default" style=""><ul class="bin-scrollbar__view bin-cascader-menu__list" style=""><!--[--><!--[--><li id="cascader-menu-2652-0-171" role="menuitem" aria-haspopup="true" aria-owns="cascader-menu-2652-0" aria-expanded="false" tabindex="-1" class="bin-cascader-node"><!----><span class="bin-cascader-node__label">南京</span><!--[--><i class="b-iconfont b-icon-right bin-cascader-node__postfix"></i><!--]--></li><li id="cascader-menu-2652-0-175" role="menuitem" aria-haspopup="true" aria-owns="cascader-menu-2652-0" aria-expanded="false" tabindex="-1" class="bin-cascader-node"><!----><span class="bin-cascader-node__label">徐州</span><!--[--><i class="b-iconfont b-icon-right bin-cascader-node__postfix"></i><!--]--></li><!--]--><!----><!--]--></ul></div><!--[--><div class="bin-scrollbar__bar is-horizontal" style=""><div class="bin-scrollbar__thumb" style="width:0;transform:translateX(0%);ms-transform:translateX(0%);webkit-transform:translateX(0%);"></div></div><div class="bin-scrollbar__bar is-vertical" style=""><div class="bin-scrollbar__thumb" style="height:0;transform:translateY(0%);ms-transform:translateY(0%);webkit-transform:translateY(0%);"></div></div><!--]--></div><!--]--></div><div class="bin-scrollbar bin-cascader__suggestion-panel"><div class="bin-scrollbar__wrap bin-scrollbar__wrap--hidden-default" style=""><ul class="bin-scrollbar__view bin-cascader__suggestion-list" style=""><!--[--><!--[--><li class="bin-cascader__empty-text">暂无数据</li><!--]--><!--]--></ul></div><!--[--><div class="bin-scrollbar__bar is-horizontal" style=""><div class="bin-scrollbar__thumb" style="width:0;transform:translateX(0%);ms-transform:translateX(0%);webkit-transform:translateX(0%);"></div></div><div class="bin-scrollbar__bar is-vertical" style=""><div class="bin-scrollbar__thumb" style="height:0;transform:translateY(0%);ms-transform:translateY(0%);webkit-transform:translateY(0%);"></div></div><!--]--></div><!--]--><!----></div><!--teleport anchor--><div class="bin-cascader__dropdown bin-popper is-light is-pure" style="z-index:2173;display:none;" id="bin-popper-1545" role="tooltip"><!--[--><div class="bin-cascader-panel"><!--[--><div class="bin-scrollbar bin-cascader-menu" id="cascader-menu-9792-0" role="menu"><div class="bin-cascader-menu__wrap bin-scrollbar__wrap bin-scrollbar__wrap--hidden-default" style=""><ul class="bin-scrollbar__view bin-cascader-menu__list" style=""><!--[--><!--[--><li id="cascader-menu-9792-0-188" role="menuitem" aria-haspopup="true" aria-owns="cascader-menu-9792-0" aria-expanded="false" tabindex="-1" class="bin-cascader-node"><label class="bin-checkbox"><span class="bin-checkbox__input" tabindex="false" role="false" aria-checked="false"><span class="bin-checkbox__inner"></span><input class="bin-checkbox__original" type="checkbox" aria-hidden="false" value="false"></span><!----></label><span class="bin-cascader-node__label">南京</span><!--[--><i class="b-iconfont b-icon-right bin-cascader-node__postfix"></i><!--]--></li><li id="cascader-menu-9792-0-192" role="menuitem" aria-haspopup="true" aria-owns="cascader-menu-9792-0" aria-expanded="false" tabindex="-1" class="bin-cascader-node"><label class="bin-checkbox"><span class="bin-checkbox__input" tabindex="false" role="false" aria-checked="false"><span class="bin-checkbox__inner"></span><input class="bin-checkbox__original" type="checkbox" aria-hidden="false" value="false"></span><!----></label><span class="bin-cascader-node__label">徐州</span><!--[--><i class="b-iconfont b-icon-right bin-cascader-node__postfix"></i><!--]--></li><!--]--><!----><!--]--></ul></div><!--[--><div class="bin-scrollbar__bar is-horizontal" style=""><div class="bin-scrollbar__thumb" style="width:0;transform:translateX(0%);ms-transform:translateX(0%);webkit-transform:translateX(0%);"></div></div><div class="bin-scrollbar__bar is-vertical" style=""><div class="bin-scrollbar__thumb" style="height:0;transform:translateY(0%);ms-transform:translateY(0%);webkit-transform:translateY(0%);"></div></div><!--]--></div><!--]--></div><div class="bin-scrollbar bin-cascader__suggestion-panel"><div class="bin-scrollbar__wrap bin-scrollbar__wrap--hidden-default" style=""><ul class="bin-scrollbar__view bin-cascader__suggestion-list" style=""><!--[--><!--[--><li class="bin-cascader__empty-text">暂无数据</li><!--]--><!--]--></ul></div><!--[--><div class="bin-scrollbar__bar is-horizontal" style=""><div class="bin-scrollbar__thumb" style="width:0;transform:translateX(0%);ms-transform:translateX(0%);webkit-transform:translateX(0%);"></div></div><div class="bin-scrollbar__bar is-vertical" style=""><div class="bin-scrollbar__thumb" style="height:0;transform:translateY(0%);ms-transform:translateY(0%);webkit-transform:translateY(0%);"></div></div><!--]--></div><!--]--><!----></div><!--teleport anchor--><div class="bin-cascader__dropdown bin-popper is-light is-pure" style="z-index:2174;display:none;" id="bin-popper-4966" role="tooltip"><!--[--><div class="bin-cascader-panel"><!--[--><div class="bin-scrollbar bin-cascader-menu" id="cascader-menu-594-0" role="menu"><div class="bin-cascader-menu__wrap bin-scrollbar__wrap bin-scrollbar__wrap--hidden-default" style=""><ul class="bin-scrollbar__view bin-cascader-menu__list" style=""><!--[--><!--[--><li id="cascader-menu-594-0-205" role="menuitem" aria-haspopup="true" aria-owns="cascader-menu-594-0" aria-expanded="false" tabindex="-1" class="bin-cascader-node"><!----><span class="bin-cascader-node__label"><span>南京</span><span>(3)</span></span><!--[--><i class="b-iconfont b-icon-right bin-cascader-node__postfix"></i><!--]--></li><li id="cascader-menu-594-0-209" role="menuitem" aria-haspopup="true" aria-owns="cascader-menu-594-0" aria-expanded="false" tabindex="-1" class="bin-cascader-node"><!----><span class="bin-cascader-node__label"><span>徐州</span><span>(8)</span></span><!--[--><i class="b-iconfont b-icon-right bin-cascader-node__postfix"></i><!--]--></li><!--]--><!----><!--]--></ul></div><!--[--><div class="bin-scrollbar__bar is-horizontal" style=""><div class="bin-scrollbar__thumb" style="width:0;transform:translateX(0%);ms-transform:translateX(0%);webkit-transform:translateX(0%);"></div></div><div class="bin-scrollbar__bar is-vertical" style=""><div class="bin-scrollbar__thumb" style="height:0;transform:translateY(0%);ms-transform:translateY(0%);webkit-transform:translateY(0%);"></div></div><!--]--></div><!--]--></div><!----><!--]--><!----></div><!--teleport anchor--><div class="bin-cascader__dropdown bin-popper is-light is-pure" style="z-index:2175;display:none;" id="bin-popper-2178" role="tooltip"><!--[--><div class="bin-cascader-panel"><!--[--><div class="bin-scrollbar bin-cascader-menu" id="cascader-menu-8425-0" role="menu"><div class="bin-cascader-menu__wrap bin-scrollbar__wrap bin-scrollbar__wrap--hidden-default" style=""><ul class="bin-scrollbar__view bin-cascader-menu__list" style=""><!--[--><!--[--><li id="cascader-menu-8425-0-222" role="menuitem" aria-haspopup="true" aria-owns="cascader-menu-8425-0" aria-expanded="false" tabindex="-1" class="bin-cascader-node"><!----><span class="bin-cascader-node__label">南京</span><!--[--><i class="b-iconfont b-icon-right bin-cascader-node__postfix"></i><!--]--></li><li id="cascader-menu-8425-0-226" role="menuitem" aria-haspopup="true" aria-owns="cascader-menu-8425-0" aria-expanded="false" tabindex="-1" class="bin-cascader-node"><!----><span class="bin-cascader-node__label">徐州</span><!--[--><i class="b-iconfont b-icon-right bin-cascader-node__postfix"></i><!--]--></li><!--]--><!----><!--]--></ul></div><!--[--><div class="bin-scrollbar__bar is-horizontal" style=""><div class="bin-scrollbar__thumb" style="width:0;transform:translateX(0%);ms-transform:translateX(0%);webkit-transform:translateX(0%);"></div></div><div class="bin-scrollbar__bar is-vertical" style=""><div class="bin-scrollbar__thumb" style="height:0;transform:translateY(0%);ms-transform:translateY(0%);webkit-transform:translateY(0%);"></div></div><!--]--></div><!--]--></div><!----><!--]--><!----></div><!--teleport anchor--><div class="bin-cascader__dropdown bin-popper is-light is-pure" style="z-index:2176;display:none;" id="bin-popper-4263" role="tooltip"><!--[--><div class="bin-cascader-panel"><!--[--><div class="bin-scrollbar bin-cascader-menu" id="cascader-menu-6226-0" role="menu"><div class="bin-cascader-menu__wrap bin-scrollbar__wrap bin-scrollbar__wrap--hidden-default" style=""><ul class="bin-scrollbar__view bin-cascader-menu__list" style=""><!--[--><!--[--><li id="cascader-menu-6226-0-239" role="menuitem" aria-haspopup="true" aria-owns="cascader-menu-6226-0" aria-expanded="false" tabindex="-1" class="bin-cascader-node"><!----><span class="bin-cascader-node__label">南京</span><!--[--><i class="b-iconfont b-icon-right bin-cascader-node__postfix"></i><!--]--></li><li id="cascader-menu-6226-0-243" role="menuitem" aria-haspopup="true" aria-owns="cascader-menu-6226-0" aria-expanded="false" tabindex="-1" class="bin-cascader-node"><!----><span class="bin-cascader-node__label">徐州</span><!--[--><i class="b-iconfont b-icon-right bin-cascader-node__postfix"></i><!--]--></li><!--]--><!----><!--]--></ul></div><!--[--><div class="bin-scrollbar__bar is-horizontal" style=""><div class="bin-scrollbar__thumb" style="width:0;transform:translateX(0%);ms-transform:translateX(0%);webkit-transform:translateX(0%);"></div></div><div class="bin-scrollbar__bar is-vertical" style=""><div class="bin-scrollbar__thumb" style="height:0;transform:translateY(0%);ms-transform:translateY(0%);webkit-transform:translateY(0%);"></div></div><!--]--></div><!--]--></div><!----><!--]--><!----></div><!--teleport anchor--><div class="bin-cascader__dropdown bin-popper is-light is-pure" style="z-index:2177;display:none;" id="bin-popper-8835" role="tooltip"><!--[--><div class="bin-cascader-panel"><!--[--><div class="bin-scrollbar bin-cascader-menu" id="cascader-menu-4069-0" role="menu"><div class="bin-cascader-menu__wrap bin-scrollbar__wrap bin-scrollbar__wrap--hidden-default" style=""><ul class="bin-scrollbar__view bin-cascader-menu__list" style=""><!--[--><!--[--><li id="cascader-menu-4069-0-256" role="menuitem" aria-haspopup="true" aria-owns="cascader-menu-4069-0" aria-expanded="false" tabindex="-1" class="bin-cascader-node"><!----><span class="bin-cascader-node__label">南京</span><!--[--><i class="b-iconfont b-icon-right bin-cascader-node__postfix"></i><!--]--></li><li id="cascader-menu-4069-0-260" role="menuitem" aria-haspopup="true" aria-owns="cascader-menu-4069-0" aria-expanded="false" tabindex="-1" class="bin-cascader-node"><!----><span class="bin-cascader-node__label">徐州</span><!--[--><i class="b-iconfont b-icon-right bin-cascader-node__postfix"></i><!--]--></li><!--]--><!----><!--]--></ul></div><!--[--><div class="bin-scrollbar__bar is-horizontal" style=""><div class="bin-scrollbar__thumb" style="width:0;transform:translateX(0%);ms-transform:translateX(0%);webkit-transform:translateX(0%);"></div></div><div class="bin-scrollbar__bar is-vertical" style=""><div class="bin-scrollbar__thumb" style="height:0;transform:translateY(0%);ms-transform:translateY(0%);webkit-transform:translateY(0%);"></div></div><!--]--></div><!--]--></div><!----><!--]--><!----></div><!--teleport anchor--><div class="bin-cascader__dropdown bin-popper is-light is-pure" style="z-index:2178;display:none;" id="bin-popper-5063" role="tooltip"><!--[--><div class="bin-cascader-panel"><!--[--><div class="bin-scrollbar bin-cascader-menu" id="cascader-menu-1501-0" role="menu"><div class="bin-cascader-menu__wrap bin-scrollbar__wrap bin-scrollbar__wrap--hidden-default" style=""><ul class="bin-scrollbar__view bin-cascader-menu__list" style=""><!--[--><!--[--><li id="cascader-menu-1501-0-273" role="menuitem" aria-haspopup="true" aria-owns="cascader-menu-1501-0" aria-expanded="false" tabindex="-1" class="bin-cascader-node"><!----><span class="bin-cascader-node__label">南京</span><!--[--><i class="b-iconfont b-icon-right bin-cascader-node__postfix"></i><!--]--></li><li id="cascader-menu-1501-0-277" role="menuitem" aria-haspopup="true" aria-owns="cascader-menu-1501-0" aria-expanded="false" tabindex="-1" class="bin-cascader-node"><!----><span class="bin-cascader-node__label">徐州</span><!--[--><i class="b-iconfont b-icon-right bin-cascader-node__postfix"></i><!--]--></li><!--]--><!----><!--]--></ul></div><!--[--><div class="bin-scrollbar__bar is-horizontal" style=""><div class="bin-scrollbar__thumb" style="width:0;transform:translateX(0%);ms-transform:translateX(0%);webkit-transform:translateX(0%);"></div></div><div class="bin-scrollbar__bar is-vertical" style=""><div class="bin-scrollbar__thumb" style="height:0;transform:translateY(0%);ms-transform:translateY(0%);webkit-transform:translateY(0%);"></div></div><!--]--></div><!--]--></div><!----><!--]--><!----></div><!--teleport anchor-->
    <div id="app"><div class="Layout" data-v-10b21a41><!--[--><!--]--><!--[--><span tabindex="-1" data-v-adaaf041></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-adaaf041> Skip to content </a><!--]--><!----><header class="VPNav" data-v-10b21a41 data-v-53d5d812><div class="VPNavBar has-sidebar" data-v-53d5d812 data-v-9b495835><div class="container" data-v-9b495835><div class="title" data-v-9b495835><div class="VPNavBarTitle has-sidebar" data-v-9b495835 data-v-e8b3dcd3><a class="title" href="/bin-ui-design/" data-v-e8b3dcd3><!--[--><!--]--><!--[--><img class="VPImage logo" src="/bin-ui-design/logo.svg" alt data-v-8268b5c7><!--]--><!--[-->BIN-UI-DESIGN<!--]--><!--[--><!--]--></a></div></div><div class="content" data-v-9b495835><div class="curtain" data-v-9b495835></div><div class="content-body" data-v-9b495835><!--[--><!--]--><div class="VPNavBarSearch search" style="--vp-meta-key:&#39;Meta&#39;;" data-v-9b495835><!--[--><!----><div id="local-search"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg class="DocSearch-Search-Icon" width="20" height="20" viewBox="0 0 20 20" aria-label="search icon"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"><kbd class="DocSearch-Button-Key"></kbd><kbd class="DocSearch-Button-Key">K</kbd></span></button></div><!--]--></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-9b495835 data-v-65dcea68><span id="main-nav-aria-label" class="visually-hidden" data-v-65dcea68>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/bin-ui-design/docs/introduction.html" tabindex="0" data-v-65dcea68 data-v-d94ce39d><!--[--><span data-v-d94ce39d>文档</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink active" href="/bin-ui-design/components/button.html" tabindex="0" data-v-65dcea68 data-v-d94ce39d><!--[--><span data-v-d94ce39d>组件</span><!--]--></a><!--]--><!--[--><div class="VPFlyout VPNavBarMenuGroup" data-v-65dcea68 data-v-8d848982><button type="button" class="button" aria-haspopup="true" aria-expanded="false" data-v-8d848982><span class="text" data-v-8d848982><!----><span data-v-8d848982>生态系统</span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="text-icon" data-v-8d848982><path d="M12,16c-0.3,0-0.5-0.1-0.7-0.3l-6-6c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l5.3,5.3l5.3-5.3c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-6,6C12.5,15.9,12.3,16,12,16z"></path></svg></span></button><div class="menu" data-v-8d848982><div class="VPMenu" data-v-8d848982 data-v-a89d4855><div class="items" data-v-a89d4855><!--[--><!--[--><div class="VPMenuLink" data-v-a89d4855 data-v-6cb95b35><span class="VPLink" data-v-6cb95b35><!--[-->资源<!--]--></span></div><!--]--><!--[--><div class="VPMenuLink" data-v-a89d4855 data-v-6cb95b35><a class="VPLink link vp-external-link-icon" href="https://wangbin3162.github.io/bin-admin-pro/" target="_blank" rel="noreferrer" data-v-6cb95b35><!--[-->bin-admin-pro<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-a89d4855 data-v-6cb95b35><a class="VPLink link vp-external-link-icon" href="https://wangbin3162.github.io/bin-datav" target="_blank" rel="noreferrer" data-v-6cb95b35><!--[-->bin-datav<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-a89d4855 data-v-6cb95b35><a class="VPLink link vp-external-link-icon" href="https://wangbin3162.github.io/bin-datav-schema/" target="_blank" rel="noreferrer" data-v-6cb95b35><!--[-->bin-datav-schema<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-a89d4855 data-v-6cb95b35><span class="VPLink" data-v-6cb95b35><!--[-->官方库v3<!--]--></span></div><!--]--><!--[--><div class="VPMenuLink" data-v-a89d4855 data-v-6cb95b35><a class="VPLink link vp-external-link-icon" href="https://wangbin3162.github.io/bin-ui-next/" target="_blank" rel="noreferrer" data-v-6cb95b35><!--[-->bin-ui-next<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-a89d4855 data-v-6cb95b35><a class="VPLink link vp-external-link-icon" href="https://wangbin3162.github.io/bin-editor-next/" target="_blank" rel="noreferrer" data-v-6cb95b35><!--[-->bin-editor-next<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-a89d4855 data-v-6cb95b35><a class="VPLink link vp-external-link-icon" href="https://wangbin3162.github.io/bin-charts-next/" target="_blank" rel="noreferrer" data-v-6cb95b35><!--[-->bin-charts-next<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-a89d4855 data-v-6cb95b35><span class="VPLink" data-v-6cb95b35><!--[-->官方库v2<!--]--></span></div><!--]--><!--[--><div class="VPMenuLink" data-v-a89d4855 data-v-6cb95b35><a class="VPLink link vp-external-link-icon" href="https://wangbin3162.github.io/bin-ui/" target="_blank" rel="noreferrer" data-v-6cb95b35><!--[-->bin-ui<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-a89d4855 data-v-6cb95b35><a class="VPLink link vp-external-link-icon" href="https://wangbin3162.github.io/bin-ace-editor/" target="_blank" rel="noreferrer" data-v-6cb95b35><!--[-->bin-ace-editor<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-a89d4855 data-v-6cb95b35><a class="VPLink link vp-external-link-icon" href="https://wangbin3162.github.io/bin-charts/" target="_blank" rel="noreferrer" data-v-6cb95b35><!--[-->bin-charts<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-a89d4855 data-v-6cb95b35><a class="VPLink link vp-external-link-icon" href="https://wangbin3162.github.io/bin-tree-org/" target="_blank" rel="noreferrer" data-v-6cb95b35><!--[-->bin-tree-org<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-a89d4855 data-v-6cb95b35><span class="VPLink" data-v-6cb95b35><!--[-->动画库<!--]--></span></div><!--]--><!--[--><div class="VPMenuLink" data-v-a89d4855 data-v-6cb95b35><a class="VPLink link vp-external-link-icon" href="https://wangbin3162.github.io/bin-animation/" target="_blank" rel="noreferrer" data-v-6cb95b35><!--[-->bin-animation<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-a89d4855 data-v-6cb95b35><a class="VPLink link vp-external-link-icon" href="https://wangbin3162.github.io/bin-keyframe-animation/" target="_blank" rel="noreferrer" data-v-6cb95b35><!--[-->bin-keyframe-animation<!--]--></a></div><!--]--><!--]--></div><!--[--><!--]--></div></div></div><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-9b495835 data-v-6e555ce1><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="toggle dark mode" aria-checked="false" data-v-6e555ce1 data-v-843b33e0 data-v-1a25bfd8><span class="check" data-v-1a25bfd8><span class="icon" data-v-1a25bfd8><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-843b33e0><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-843b33e0><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div><div class="VPSocialLinks VPNavBarSocialLinks social-links" data-v-9b495835 data-v-e0d4c2fb data-v-54ca10e8><!--[--><a class="VPSocialLink no-icon" href="https://github.com/wangbin3162/bin-ui-design" aria-label="github" target="_blank" rel="noopener" data-v-54ca10e8 data-v-f031c1b5><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a><!--]--></div><div class="VPFlyout VPNavBarExtra extra" data-v-9b495835 data-v-3ec7766a data-v-8d848982><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-8d848982><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="icon" data-v-8d848982><circle cx="12" cy="12" r="2"></circle><circle cx="19" cy="12" r="2"></circle><circle cx="5" cy="12" r="2"></circle></svg></button><div class="menu" data-v-8d848982><div class="VPMenu" data-v-8d848982 data-v-a89d4855><!----><!--[--><!--[--><!----><div class="group" data-v-3ec7766a><div class="item appearance" data-v-3ec7766a><p class="label" data-v-3ec7766a>Appearance</p><div class="appearance-action" data-v-3ec7766a><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="toggle dark mode" aria-checked="false" data-v-3ec7766a data-v-843b33e0 data-v-1a25bfd8><span class="check" data-v-1a25bfd8><span class="icon" data-v-1a25bfd8><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-843b33e0><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-843b33e0><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div></div></div><div class="group" data-v-3ec7766a><div class="item social-links" data-v-3ec7766a><div class="VPSocialLinks social-links-list" data-v-3ec7766a data-v-54ca10e8><!--[--><a class="VPSocialLink no-icon" href="https://github.com/wangbin3162/bin-ui-design" aria-label="github" target="_blank" rel="noopener" data-v-54ca10e8 data-v-f031c1b5><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a><!--]--></div></div></div><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-9b495835 data-v-0a67234a><span class="container" data-v-0a67234a><span class="top" data-v-0a67234a></span><span class="middle" data-v-0a67234a></span><span class="bottom" data-v-0a67234a></span></span></button></div></div></div></div><!----></header><div class="VPLocalNav reached-top" data-v-10b21a41 data-v-eddb4634><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-eddb4634><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="menu-icon" data-v-eddb4634><path d="M17,11H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,11,17,11z"></path><path d="M21,7H3C2.4,7,2,6.6,2,6s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,7,21,7z"></path><path d="M21,15H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,15,21,15z"></path><path d="M17,19H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,19,17,19z"></path></svg><span class="menu-text" data-v-eddb4634>Menu</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-eddb4634 data-v-b2855fa6><button data-v-b2855fa6>Return to top</button><!----></div></div><aside class="VPSidebar" data-v-10b21a41 data-v-2abe540d><div class="curtain" data-v-2abe540d></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-2abe540d><span class="visually-hidden" id="sidebar-aria-label" data-v-2abe540d> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="group" data-v-2abe540d><section class="VPSidebarItem level-0" data-v-2abe540d data-v-e0a666f9><div class="item" role="button" tabindex="0" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><h2 class="text" data-v-e0a666f9>通用组件 (8)</h2><!----></div><div class="items" data-v-e0a666f9><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/components/icon.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9><i class="b-iconfont b-icon-fire"></i>图标<span>Icon</span></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/components/button.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9><i class="b-iconfont b-icon-Youtube"></i>按钮<span>Button</span></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/components/card.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9><i class="b-iconfont b-icon-creditcard"></i>卡片<span>Card</span></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/components/collapse.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9><i class="b-iconfont b-icon-interation"></i>折叠面板<span>Collapse</span></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/components/divider.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9><i class="b-iconfont b-icon-line"></i>分割线<span>Divider</span></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/components/dropdown.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9><i class="b-iconfont b-icon-caret-down"></i>下拉菜单<span>Dropdown</span></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/components/tag.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9><i class="b-iconfont b-icon-tags"></i>标签<span>Tag</span></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/components/image.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9><i class="b-iconfont b-icon-image"></i>图片<span>Image</span></p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-2abe540d><section class="VPSidebarItem level-0" data-v-2abe540d data-v-e0a666f9><div class="item" role="button" tabindex="0" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><h2 class="text" data-v-e0a666f9>布局组件 (4)</h2><!----></div><div class="items" data-v-e0a666f9><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/components/layout.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9><i class="b-iconfont b-icon-layout"></i>布局组件<span>Layout</span></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/components/grid.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9><i class="b-iconfont b-icon-appstore"></i>栅格<span>Grid</span></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/components/space.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9><i class="b-iconfont b-icon-swap"></i>间距<span>Space</span></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/components/split.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9><i class="b-iconfont b-icon-block"></i>分割面板<span>Split</span></p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-2abe540d><section class="VPSidebarItem level-0 has-active" data-v-2abe540d data-v-e0a666f9><div class="item" role="button" tabindex="0" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><h2 class="text" data-v-e0a666f9>数据录入组件 (14)</h2><!----></div><div class="items" data-v-e0a666f9><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/components/input.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9><i class="b-iconfont b-icon-edit-square"></i>输入框<span>Input</span></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/components/input-number.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9><i class="b-iconfont b-icon-shake"></i>数字输入<span>InputNumber</span></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/components/radio.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9><i class="b-iconfont b-icon-plus-circle"></i>单选框<span>Radio</span></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/components/checkbox.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9><i class="b-iconfont b-icon-check-square"></i>多选框<span>Checkbox</span></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/components/switch.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9><i class="b-iconfont b-icon-build"></i>开关<span>Switch</span></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/components/select.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9><i class="b-iconfont b-icon-unorderedlist"></i>选择器<span>Select</span></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/components/cascader.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9><i class="b-iconfont b-icon-pic-left"></i>级联选择<span>Cascader</span></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/components/date-picker.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9><i class="b-iconfont b-icon-calendar"></i>日期选择器<span>DatePicker</span></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/components/time-picker.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9><i class="b-iconfont b-icon-time-circle"></i>时间选择器<span>TimePicker</span></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/components/color-picker.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9><i class="b-iconfont b-icon-bg-colors"></i>颜色选择器<span>ColorPicker</span></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/components/rate.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9><i class="b-iconfont b-icon-star"></i>评分<span>Rate</span></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/components/slider.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9><i class="b-iconfont b-icon-minus"></i>滑块<span>Slider</span></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/components/upload.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9><i class="b-iconfont b-icon-cloud-upload"></i>上传<span>Upload</span></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/components/form.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9><i class="b-iconfont b-icon-reconciliation"></i>表单<span>Form</span></p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-2abe540d><section class="VPSidebarItem level-0" data-v-2abe540d data-v-e0a666f9><div class="item" role="button" tabindex="0" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><h2 class="text" data-v-e0a666f9>数据展示组件 (9)</h2><!----></div><div class="items" data-v-e0a666f9><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/components/tree.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9><i class="b-iconfont b-icon-branches"></i>树结构<span>Tree</span></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/components/table.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9><i class="b-iconfont b-icon-table"></i>表格<span>Table</span></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/components/page.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9><i class="b-iconfont b-icon-read"></i>分页<span>Page</span></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/components/desc.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9><i class="b-iconfont b-icon-unorderedlist"></i>描述<span>Desc</span></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/components/timeline.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9><i class="b-iconfont b-icon-arrowdown"></i>时间线<span>Timeline</span></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/components/calendar.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9><i class="b-iconfont b-icon-calendar-fill"></i>日历<span>Calendar</span></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/components/carousel.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9><i class="b-iconfont b-icon-appstore-fill"></i>轮播<span>Carousel</span></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/components/count-to.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9><i class="b-iconfont b-icon-orderedlist"></i>数字动画<span>CountTo</span></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/components/trend.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9><i class="b-iconfont b-icon-caret-up"></i>趋势标记<span>Trend</span></p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-2abe540d><section class="VPSidebarItem level-0" data-v-2abe540d data-v-e0a666f9><div class="item" role="button" tabindex="0" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><h2 class="text" data-v-e0a666f9>导航组件 (8)</h2><!----></div><div class="items" data-v-e0a666f9><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/components/affix.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9><i class="b-iconfont b-icon-pushpin"></i>图钉<span>Affix</span></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/components/anchor.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9><i class="b-iconfont b-icon-attachment"></i>锚点<span>Anchor</span></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/components/back-top.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9><i class="b-iconfont b-icon-up"></i>返回顶部<span>BackTop</span></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/components/breadcrumb.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9><i class="b-iconfont b-icon-right"></i>面包屑<span>Breadcrumb</span></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/components/loading-bar.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9><i class="b-iconfont b-icon-minus"></i>加载条<span>Loading Bar</span></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/components/menu.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9><i class="b-iconfont b-icon-menu"></i>菜单<span>Menu</span></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/components/tabs.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9><i class="b-iconfont b-icon-project"></i>标签页<span>Tabs</span></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/components/steps.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9><i class="b-iconfont b-icon-arrowright"></i>步骤<span>Steps</span></p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-2abe540d><section class="VPSidebarItem level-0" data-v-2abe540d data-v-e0a666f9><div class="item" role="button" tabindex="0" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><h2 class="text" data-v-e0a666f9>反馈组件 (13)</h2><!----></div><div class="items" data-v-e0a666f9><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/components/alert.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9><i class="b-iconfont b-icon-error-fill"></i>警告信息<span>Alert</span></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/components/badge.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9><i class="b-iconfont b-icon-border"></i>标记<span>Badge</span></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/components/modal.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9><i class="b-iconfont b-icon-idcard"></i>模态框<span>Modal</span></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/components/message.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9><i class="b-iconfont b-icon-message"></i>消息提示<span>Message</span></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/components/message-box.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9><i class="b-iconfont b-icon-mail"></i>弹框提示<span>MessageBox</span></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/components/notice.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9><i class="b-iconfont b-icon-notification"></i>通知<span>Notice</span></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/components/tooltip.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9><i class="b-iconfont b-icon-info-circle"></i>弹出提示<span>Tooltip</span></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/components/popover.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9><i class="b-iconfont b-icon-question-circle"></i>弹出信息<span>Popover</span></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/components/drawer.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9><i class="b-iconfont b-icon-build"></i>抽屉<span>Drawer</span></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/components/skeleton.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9><i class="b-iconfont b-icon-sever-fill"></i>骨架屏<span>Skeleton</span></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/components/loading.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9><i class="b-iconfont b-icon-loading"></i>加载<span>Loading</span></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/components/progress.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9><i class="b-iconfont b-icon-hourglass"></i>进度条<span>Progress</span></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/components/circle.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9><i class="b-iconfont b-icon-redo"></i>进度环<span>Circle</span></p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-2abe540d><section class="VPSidebarItem level-0" data-v-2abe540d data-v-e0a666f9><div class="item" role="button" tabindex="0" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><h2 class="text" data-v-e0a666f9>内置组件 (4)</h2><!----></div><div class="items" data-v-e0a666f9><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/components/empty.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9><i class="b-iconfont b-icon-border"></i>空状态<span>Empty</span></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/components/scrollbar.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9><i class="b-iconfont b-icon-container"></i>滚动组件<span>Scrollbar</span></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/components/popper.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9><i class="b-iconfont b-icon-pic-center"></i>弹层<span>Popper</span></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/components/contextmenu.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9><i class="b-iconfont b-icon-menu"></i>右键菜单<span>Contextmenu</span></p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-2abe540d><section class="VPSidebarItem level-0" data-v-2abe540d data-v-e0a666f9><div class="item" role="button" tabindex="0" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><h2 class="text" data-v-e0a666f9>配置组件 (1)</h2><!----></div><div class="items" data-v-e0a666f9><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/components/config-provider.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9><i class="b-iconfont b-icon-setting"></i>全局配置<span>ConfigProvider</span></p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-10b21a41 data-v-4d31e3f3><div class="VPDoc has-sidebar has-aside" data-v-4d31e3f3 data-v-9f9999b2><!--[--><!--]--><div class="container" data-v-9f9999b2><div class="aside" data-v-9f9999b2><div class="aside-curtain" data-v-9f9999b2></div><div class="aside-container" data-v-9f9999b2><div class="aside-content" data-v-9f9999b2><div class="VPDocAside" data-v-9f9999b2 data-v-1658cfd8><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" data-v-1658cfd8 data-v-667990eb><div class="content" data-v-667990eb><div class="outline-marker" data-v-667990eb></div><div class="outline-title" data-v-667990eb>On this page</div><nav aria-labelledby="doc-outline-aria-label" data-v-667990eb><span class="visually-hidden" id="doc-outline-aria-label" data-v-667990eb> Table of Contents for current page </span><ul class="root" data-v-667990eb data-v-d7e7591d><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-1658cfd8></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-9f9999b2><div class="content-container" data-v-9f9999b2><!--[--><!--]--><!----><main class="main" data-v-9f9999b2><div style="position:relative;" class="vp-doc _bin-ui-design_components_cascader" data-v-9f9999b2><div><!----><h1 id="级联选择-cascader" tabindex="-1">级联选择 Cascader <a class="header-anchor" href="#级联选择-cascader" aria-label="Permalink to &quot;级联选择 Cascader&quot;">​</a></h1><p>通用的级联选择器</p><h2 id="基础用法" tabindex="-1">基础用法 <a class="header-anchor" href="#基础用法" aria-label="Permalink to &quot;基础用法&quot;">​</a></h2><div class="vitepress-demo-preview__element-plus__container" suffixname="vue" absolutepath="D:\Workspace\MyProject\bin-ui-design\demo\components\demo\Cascader\Basic.vue" relativepath="./demo/Cascader/Basic.vue"><section class="vitepress-demo-preview-preview"><!--[--><div flex><div class="block" style="width:220px;margin-right:20px;"><span class="demonstration">默认 click 触发子菜单</span><!--[--><div class="bin-cascader" aria-describedby="bin-popper-873" style=""><div class="bin-input-wrapper bin-input-type-text"><!--[--><!----><input autocomplete="off" type="text" class="bin-input bin-input-with-suffix" placeholder="" readonly value="" number="false"><!----><span class="bin-input-suffix"><!----><!----><!----><!--[--><i class="b-iconfont b-icon-down"></i><!--]--><!----></span><!----><!----><!----><!--]--></div><!----></div><!--teleport start--><!--teleport end--><!--]--></div><div class="block" style="width:220px;margin-right:20px;"><span class="demonstration">hover 触发子菜单</span><!--[--><div class="bin-cascader" aria-describedby="bin-popper-9397" style=""><div class="bin-input-wrapper bin-input-type-text"><!--[--><!----><input autocomplete="off" type="text" class="bin-input bin-input-with-suffix" placeholder="" readonly value="" number="false"><!----><span class="bin-input-suffix"><!----><!----><!----><!--[--><i class="b-iconfont b-icon-down"></i><!--]--><!----></span><!----><!----><!----><!--]--></div><!----></div><!--teleport start--><!--teleport end--><!--]--></div><div class="block" style="width:220px;margin-right:20px;"><span class="demonstration">选项值</span><div class="mt-5">[]</div></div></div><!--]--></section><section class="vitepress-demo-preview-description"><div class="vitepress-demo-preview-description__split-line"></div><div class="vitepress-demo-preview-description__handle-btn"><svg t="1661231422733" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3259" width="20" height="20"><path d="M682.666667 810.666667c-12.8 0-21.333333-4.266667-29.866667-12.8-17.066667-17.066667-17.066667-42.666667 0-59.733334l226.133333-226.133333-226.133333-226.133333c-17.066667-17.066667-17.066667-42.666667 0-59.733334s42.666667-17.066667 59.733333 0l256 256c17.066667 17.066667 17.066667 42.666667 0 59.733334l-256 256c-8.533333 8.533333-17.066667 12.8-29.866666 12.8zM341.333333 810.666667c-12.8 0-21.333333-4.266667-29.866666-12.8l-256-256c-17.066667-17.066667-17.066667-42.666667 0-59.733334l256-256c17.066667-17.066667 42.666667-17.066667 59.733333 0s17.066667 42.666667 0 59.733334L145.066667 512l226.133333 226.133333c17.066667 17.066667 17.066667 42.666667 0 59.733334-8.533333 8.533333-17.066667 12.8-29.866667 12.8z" p-id="3260"></path></svg><svg viewBox="0 0 544 560" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M399.503 143.667C399.319 152.501 406.332 159.812 415.167 159.997C424.001 160.181 431.312 153.168 431.497 144.333L399.503 143.667ZM416 120L431.997 120.333C431.999 120.207 432 120.081 432 119.954L416 120ZM360 64L360.046 48.0001C360.03 48 360.015 48 360 48L360 64ZM144 64V48C143.984 48 143.968 48 143.953 48.0001L144 64ZM80 128L64.0001 127.953C64 127.968 64 127.984 64 128L80 128ZM80 344H64C64 344.015 64 344.03 64.0001 344.046L80 344ZM136 400L135.954 416C135.97 416 135.985 416 136 416L136 400ZM160 416C168.837 416 176 408.837 176 400C176 391.163 168.837 384 160 384V416ZM217 160H439V128H217V160ZM439 160C461.644 160 480 178.356 480 201H512C512 160.683 479.317 128 439 128V160ZM480 201V423H512V201H480ZM480 423C480 445.644 461.644 464 439 464V496C479.317 496 512 463.317 512 423H480ZM439 464H217V496H439V464ZM217 464C194.356 464 176 445.644 176 423H144C144 463.317 176.683 496 217 496V464ZM176 423V201H144V423H176ZM176 201C176 178.356 194.356 160 217 160V128C176.683 128 144 160.683 144 201H176ZM431.497 144.333L431.997 120.333L400.003 119.667L399.503 143.667L431.497 144.333ZM432 119.954C431.946 100.888 424.347 82.6173 410.865 69.1349L388.238 91.7624C395.741 99.2658 399.97 109.434 400 120.046L432 119.954ZM410.865 69.1349C397.383 55.6526 379.112 48.0543 360.046 48.0001L359.954 79.9999C370.566 80.0301 380.734 84.2589 388.238 91.7624L410.865 69.1349ZM360 48H144V80H360V48ZM143.953 48.0001C122.767 48.0627 102.467 56.5064 87.4868 71.4868L110.114 94.1142C119.117 85.1118 131.316 80.0376 144.047 79.9999L143.953 48.0001ZM87.4868 71.4868C72.5064 86.4673 64.0627 106.767 64.0001 127.953L95.9999 128.047C96.0376 115.316 101.112 103.117 110.114 94.1142L87.4868 71.4868ZM64 128V344H96V128H64ZM64.0001 344.046C64.0543 363.112 71.6526 381.383 85.1349 394.865L107.762 372.238C100.259 364.734 96.0301 354.566 95.9999 343.954L64.0001 344.046ZM85.1349 394.865C98.6173 408.347 116.888 415.946 135.954 416L136.046 384C125.434 383.97 115.266 379.741 107.762 372.238L85.1349 394.865ZM136 416H160V384H136V416Z" fill="currentColor"></path></svg></div></section><section class="vitepress-demo-preview-source"><div class="language-vue"><pre v-pre class="shiki rose-pine-moon vp-code-dark" ><code><span class="line"><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">template</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">div</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">flex</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">div</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">class</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;block&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">style</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;width: 220px; margin-right: 20px&quot;</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">span</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">class</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;demonstration&quot;</span><span style="color: #6E6A86">&gt;</span><span style="color: #E0DEF4">默认 click 触发子菜单</span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">span</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-cascader</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">v-model</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;selected&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">:options</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;options&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">@change</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;handleChange&quot;</span><span style="color: #6E6A86">&gt;&lt;/</span><span style="color: #9CCFD8">b-cascader</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">div</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">div</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">class</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;block&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">style</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;width: 220px; margin-right: 20px&quot;</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">span</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">class</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;demonstration&quot;</span><span style="color: #6E6A86">&gt;</span><span style="color: #E0DEF4">hover 触发子菜单</span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">span</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-cascader</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #C4A7E7; font-style: italic">v-model</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;selected&quot;</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #C4A7E7; font-style: italic">:options</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;options&quot;</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #C4A7E7; font-style: italic">:props</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;{ expandTrigger: &#39;hover&#39; }&quot;</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #C4A7E7; font-style: italic">@change</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;handleChange&quot;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #6E6A86">&gt;&lt;/</span><span style="color: #9CCFD8">b-cascader</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">div</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">div</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">class</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;block&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">style</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;width: 220px; margin-right: 20px&quot;</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">span</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">class</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;demonstration&quot;</span><span style="color: #6E6A86">&gt;</span><span style="color: #E0DEF4">选项值</span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">span</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">div</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">class</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;mt-5&quot;</span><span style="color: #6E6A86">&gt;</span><span style="color: #E0DEF4">{{ selected }}</span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">div</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">div</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">div</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">template</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">script</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">setup</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">lang</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;ts&quot;</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #3E8FB0">import </span><span style="color: #908CAA">{</span><span style="color: #3E8FB0"> </span><span style="color: #E0DEF4; font-style: italic">ref</span><span style="color: #3E8FB0"> </span><span style="color: #908CAA">}</span><span style="color: #3E8FB0"> from </span><span style="color: #F6C177">&#39;vue&#39;</span></span>
<span class="line"></span>
<span class="line"><span style="color: #3E8FB0">const</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">options</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">=</span><span style="color: #E0DEF4"> [</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">    value</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;nanjing&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    label</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;南京&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    children</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> [</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">        value</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;xuanwu&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">        label</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;玄武区&#39;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">        value</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;gulou&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">        label</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;鼓楼区&#39;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">        value</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;jianye&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">        label</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;建邺区&#39;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">}</span></span>
<span class="line"><span style="color: #E0DEF4">    ]</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">    value</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;xuzhou&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    label</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;徐州&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    children</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> [</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">        value</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;tongshan&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">        label</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;铜山区&#39;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">        value</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;gulou&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">        label</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;鼓楼区&#39;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">        value</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;yunlong&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">        label</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;云龙区&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">        children</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> [</span></span>
<span class="line"><span style="color: #E0DEF4">          </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> value</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;dalonghu&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> label</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;大龙湖街道&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">          </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> value</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;guozhuanglu&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> label</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;郭庄路街道&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">          </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> value</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;lvdi&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> label</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;绿地商务城&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">          </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> value</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;jinlonghu&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> label</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;金龙湖街道&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">}</span></span>
<span class="line"><span style="color: #E0DEF4">        ]</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">        value</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;jiawang&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">        label</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;贾汪区&#39;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> value</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;peixian&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> label</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;沛县&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> value</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;fengxian&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> label</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;丰县&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> value</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;pizhou&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> label</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;邳州市&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> value</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;xinyi&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> label</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;新沂市&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">}</span></span>
<span class="line"><span style="color: #E0DEF4">    ]</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">}</span></span>
<span class="line"><span style="color: #E0DEF4">]</span></span>
<span class="line"><span style="color: #3E8FB0">const</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">selected</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">=</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">ref</span><span style="color: #E0DEF4">([])</span></span>
<span class="line"></span>
<span class="line"><span style="color: #3E8FB0">function</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">handleChange</span><span style="color: #908CAA">(</span><span style="color: #C4A7E7; font-style: italic">value</span><span style="color: #908CAA">)</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #E0DEF4; font-style: italic">console</span><span style="color: #3E8FB0">.</span><span style="color: #EA9A97">log</span><span style="color: #E0DEF4">(</span><span style="color: #E0DEF4; font-style: italic">value</span><span style="color: #E0DEF4">)</span></span>
<span class="line"><span style="color: #908CAA">}</span></span>
<span class="line"><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">script</span><span style="color: #6E6A86">&gt;</span></span></code></pre><pre v-pre class="shiki slack-ochin vp-code-light" ><code><span class="line"><span style="color: #002339">&lt;</span><span style="color: #0444AC">template</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">  &lt;</span><span style="color: #0444AC">div</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">flex</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">    &lt;</span><span style="color: #0444AC">div</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">class</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;block&quot;</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">style</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;width: 220px; margin-right: 20px&quot;</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">      &lt;</span><span style="color: #0444AC">span</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">class</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;demonstration&quot;</span><span style="color: #002339">&gt;默认 click 触发子菜单&lt;/</span><span style="color: #0444AC">span</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">      &lt;</span><span style="color: #0444AC">b-cascader</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">v-model</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;selected&quot;</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">:options</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;options&quot;</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">@change</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;handleChange&quot;</span><span style="color: #002339">&gt;&lt;/</span><span style="color: #0444AC">b-cascader</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">    &lt;/</span><span style="color: #0444AC">div</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">    &lt;</span><span style="color: #0444AC">div</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">class</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;block&quot;</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">style</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;width: 220px; margin-right: 20px&quot;</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">      &lt;</span><span style="color: #0444AC">span</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">class</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;demonstration&quot;</span><span style="color: #002339">&gt;hover 触发子菜单&lt;/</span><span style="color: #0444AC">span</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">      &lt;</span><span style="color: #0444AC">b-cascader</span></span>
<span class="line"><span style="color: #002339">        </span><span style="color: #DF8618; font-style: italic">v-model</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;selected&quot;</span></span>
<span class="line"><span style="color: #002339">        </span><span style="color: #DF8618; font-style: italic">:options</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;options&quot;</span></span>
<span class="line"><span style="color: #002339">        </span><span style="color: #DF8618; font-style: italic">:props</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;{ expandTrigger: &#39;hover&#39; }&quot;</span></span>
<span class="line"><span style="color: #002339">        </span><span style="color: #DF8618; font-style: italic">@change</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;handleChange&quot;</span></span>
<span class="line"><span style="color: #002339">      &gt;&lt;/</span><span style="color: #0444AC">b-cascader</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">    &lt;/</span><span style="color: #0444AC">div</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">    &lt;</span><span style="color: #0444AC">div</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">class</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;block&quot;</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">style</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;width: 220px; margin-right: 20px&quot;</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">      &lt;</span><span style="color: #0444AC">span</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">class</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;demonstration&quot;</span><span style="color: #002339">&gt;选项值&lt;/</span><span style="color: #0444AC">span</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">      &lt;</span><span style="color: #0444AC">div</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">class</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;mt-5&quot;</span><span style="color: #002339">&gt;{{ selected }}&lt;/</span><span style="color: #0444AC">div</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">    &lt;/</span><span style="color: #0444AC">div</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">  &lt;/</span><span style="color: #0444AC">div</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">&lt;/</span><span style="color: #0444AC">template</span><span style="color: #002339">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color: #002339">&lt;</span><span style="color: #0444AC">script</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">setup</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">lang</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;ts&quot;</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #7B30D0">import</span><span style="color: #002339"> { </span><span style="color: #2F86D2">ref</span><span style="color: #002339"> } </span><span style="color: #7B30D0">from</span><span style="color: #002339"> </span><span style="color: #A44185">&#39;vue&#39;</span></span>
<span class="line"></span>
<span class="line"><span style="color: #0991B6">const</span><span style="color: #002339"> </span><span style="color: #2F86D2">options</span><span style="color: #002339"> </span><span style="color: #7B30D0">=</span><span style="color: #002339"> [</span></span>
<span class="line"><span style="color: #002339">  {</span></span>
<span class="line"><span style="color: #002339">    value: </span><span style="color: #A44185">&#39;nanjing&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    label: </span><span style="color: #A44185">&#39;南京&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    children: [</span></span>
<span class="line"><span style="color: #002339">      {</span></span>
<span class="line"><span style="color: #002339">        value: </span><span style="color: #A44185">&#39;xuanwu&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">        label: </span><span style="color: #A44185">&#39;玄武区&#39;</span></span>
<span class="line"><span style="color: #002339">      },</span></span>
<span class="line"><span style="color: #002339">      {</span></span>
<span class="line"><span style="color: #002339">        value: </span><span style="color: #A44185">&#39;gulou&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">        label: </span><span style="color: #A44185">&#39;鼓楼区&#39;</span></span>
<span class="line"><span style="color: #002339">      },</span></span>
<span class="line"><span style="color: #002339">      {</span></span>
<span class="line"><span style="color: #002339">        value: </span><span style="color: #A44185">&#39;jianye&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">        label: </span><span style="color: #A44185">&#39;建邺区&#39;</span></span>
<span class="line"><span style="color: #002339">      }</span></span>
<span class="line"><span style="color: #002339">    ]</span></span>
<span class="line"><span style="color: #002339">  },</span></span>
<span class="line"><span style="color: #002339">  {</span></span>
<span class="line"><span style="color: #002339">    value: </span><span style="color: #A44185">&#39;xuzhou&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    label: </span><span style="color: #A44185">&#39;徐州&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    children: [</span></span>
<span class="line"><span style="color: #002339">      {</span></span>
<span class="line"><span style="color: #002339">        value: </span><span style="color: #A44185">&#39;tongshan&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">        label: </span><span style="color: #A44185">&#39;铜山区&#39;</span></span>
<span class="line"><span style="color: #002339">      },</span></span>
<span class="line"><span style="color: #002339">      {</span></span>
<span class="line"><span style="color: #002339">        value: </span><span style="color: #A44185">&#39;gulou&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">        label: </span><span style="color: #A44185">&#39;鼓楼区&#39;</span></span>
<span class="line"><span style="color: #002339">      },</span></span>
<span class="line"><span style="color: #002339">      {</span></span>
<span class="line"><span style="color: #002339">        value: </span><span style="color: #A44185">&#39;yunlong&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">        label: </span><span style="color: #A44185">&#39;云龙区&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">        children: [</span></span>
<span class="line"><span style="color: #002339">          { value: </span><span style="color: #A44185">&#39;dalonghu&#39;</span><span style="color: #002339">, label: </span><span style="color: #A44185">&#39;大龙湖街道&#39;</span><span style="color: #002339"> },</span></span>
<span class="line"><span style="color: #002339">          { value: </span><span style="color: #A44185">&#39;guozhuanglu&#39;</span><span style="color: #002339">, label: </span><span style="color: #A44185">&#39;郭庄路街道&#39;</span><span style="color: #002339"> },</span></span>
<span class="line"><span style="color: #002339">          { value: </span><span style="color: #A44185">&#39;lvdi&#39;</span><span style="color: #002339">, label: </span><span style="color: #A44185">&#39;绿地商务城&#39;</span><span style="color: #002339"> },</span></span>
<span class="line"><span style="color: #002339">          { value: </span><span style="color: #A44185">&#39;jinlonghu&#39;</span><span style="color: #002339">, label: </span><span style="color: #A44185">&#39;金龙湖街道&#39;</span><span style="color: #002339"> }</span></span>
<span class="line"><span style="color: #002339">        ]</span></span>
<span class="line"><span style="color: #002339">      },</span></span>
<span class="line"><span style="color: #002339">      {</span></span>
<span class="line"><span style="color: #002339">        value: </span><span style="color: #A44185">&#39;jiawang&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">        label: </span><span style="color: #A44185">&#39;贾汪区&#39;</span></span>
<span class="line"><span style="color: #002339">      },</span></span>
<span class="line"><span style="color: #002339">      { value: </span><span style="color: #A44185">&#39;peixian&#39;</span><span style="color: #002339">, label: </span><span style="color: #A44185">&#39;沛县&#39;</span><span style="color: #002339"> },</span></span>
<span class="line"><span style="color: #002339">      { value: </span><span style="color: #A44185">&#39;fengxian&#39;</span><span style="color: #002339">, label: </span><span style="color: #A44185">&#39;丰县&#39;</span><span style="color: #002339"> },</span></span>
<span class="line"><span style="color: #002339">      { value: </span><span style="color: #A44185">&#39;pizhou&#39;</span><span style="color: #002339">, label: </span><span style="color: #A44185">&#39;邳州市&#39;</span><span style="color: #002339"> },</span></span>
<span class="line"><span style="color: #002339">      { value: </span><span style="color: #A44185">&#39;xinyi&#39;</span><span style="color: #002339">, label: </span><span style="color: #A44185">&#39;新沂市&#39;</span><span style="color: #002339"> }</span></span>
<span class="line"><span style="color: #002339">    ]</span></span>
<span class="line"><span style="color: #002339">  }</span></span>
<span class="line"><span style="color: #002339">]</span></span>
<span class="line"><span style="color: #0991B6">const</span><span style="color: #002339"> </span><span style="color: #2F86D2">selected</span><span style="color: #002339"> </span><span style="color: #7B30D0">=</span><span style="color: #002339"> </span><span style="color: #7EB233">ref</span><span style="color: #002339">([])</span></span>
<span class="line"></span>
<span class="line"><span style="color: #0991B6">function</span><span style="color: #002339"> </span><span style="color: #7EB233">handleChange</span><span style="color: #002339">(</span><span style="color: #B1108E">value</span><span style="color: #002339">) {</span></span>
<span class="line"><span style="color: #002339">  </span><span style="color: #2F86D2">console</span><span style="color: #002339">.</span><span style="color: #7EB233">log</span><span style="color: #002339">(</span><span style="color: #2F86D2">value</span><span style="color: #002339">)</span></span>
<span class="line"><span style="color: #002339">}</span></span>
<span class="line"><span style="color: #002339">&lt;/</span><span style="color: #0444AC">script</span><span style="color: #002339">&gt;</span></span></code></pre></div></section></div><h2 id="禁用状态" tabindex="-1">禁用状态 <a class="header-anchor" href="#禁用状态" aria-label="Permalink to &quot;禁用状态&quot;">​</a></h2><p>设置disabled来控制禁用</p><div class="vitepress-demo-preview__element-plus__container" suffixname="vue" absolutepath="D:\Workspace\MyProject\bin-ui-design\demo\components\demo\Cascader\Disabled.vue" relativepath="./demo/Cascader/Disabled.vue"><section class="vitepress-demo-preview-preview"><!--[--><div flex><div class="block" style="width:220px;margin-right:20px;"><span class="demonstration">禁用项</span><!--[--><div class="bin-cascader" aria-describedby="bin-popper-3640" style=""><div class="bin-input-wrapper bin-input-type-text"><!--[--><!----><input autocomplete="off" type="text" class="bin-input bin-input-with-suffix" placeholder="" readonly value="" number="false"><!----><span class="bin-input-suffix"><!----><!----><!----><!--[--><i class="b-iconfont b-icon-down"></i><!--]--><!----></span><!----><!----><!----><!--]--></div><!----></div><!--teleport start--><!--teleport end--><!--]--></div><div class="block" style="width:220px;margin-right:20px;"><span class="demonstration">全部禁用</span><!--[--><div class="bin-cascader is-disabled" aria-describedby="bin-popper-5974" style=""><div class="bin-input-wrapper bin-input-type-text is-disabled"><!--[--><!----><input autocomplete="off" type="text" class="bin-input bin-input-disabled bin-input-with-suffix" placeholder="" disabled readonly value="" number="false"><!----><span class="bin-input-suffix"><!----><!----><!----><!--[--><i class="b-iconfont b-icon-down"></i><!--]--><!----></span><!----><!----><!----><!--]--></div><!----></div><!--teleport start--><!--teleport end--><!--]--></div><div class="block" style="width:220px;margin-right:20px;"><span class="demonstration">选项值</span><div class="mt-5">[]</div></div></div><!--]--></section><section class="vitepress-demo-preview-description"><div class="vitepress-demo-preview-description__split-line"></div><div class="vitepress-demo-preview-description__handle-btn"><svg t="1661231422733" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3259" width="20" height="20"><path d="M682.666667 810.666667c-12.8 0-21.333333-4.266667-29.866667-12.8-17.066667-17.066667-17.066667-42.666667 0-59.733334l226.133333-226.133333-226.133333-226.133333c-17.066667-17.066667-17.066667-42.666667 0-59.733334s42.666667-17.066667 59.733333 0l256 256c17.066667 17.066667 17.066667 42.666667 0 59.733334l-256 256c-8.533333 8.533333-17.066667 12.8-29.866666 12.8zM341.333333 810.666667c-12.8 0-21.333333-4.266667-29.866666-12.8l-256-256c-17.066667-17.066667-17.066667-42.666667 0-59.733334l256-256c17.066667-17.066667 42.666667-17.066667 59.733333 0s17.066667 42.666667 0 59.733334L145.066667 512l226.133333 226.133333c17.066667 17.066667 17.066667 42.666667 0 59.733334-8.533333 8.533333-17.066667 12.8-29.866667 12.8z" p-id="3260"></path></svg><svg viewBox="0 0 544 560" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M399.503 143.667C399.319 152.501 406.332 159.812 415.167 159.997C424.001 160.181 431.312 153.168 431.497 144.333L399.503 143.667ZM416 120L431.997 120.333C431.999 120.207 432 120.081 432 119.954L416 120ZM360 64L360.046 48.0001C360.03 48 360.015 48 360 48L360 64ZM144 64V48C143.984 48 143.968 48 143.953 48.0001L144 64ZM80 128L64.0001 127.953C64 127.968 64 127.984 64 128L80 128ZM80 344H64C64 344.015 64 344.03 64.0001 344.046L80 344ZM136 400L135.954 416C135.97 416 135.985 416 136 416L136 400ZM160 416C168.837 416 176 408.837 176 400C176 391.163 168.837 384 160 384V416ZM217 160H439V128H217V160ZM439 160C461.644 160 480 178.356 480 201H512C512 160.683 479.317 128 439 128V160ZM480 201V423H512V201H480ZM480 423C480 445.644 461.644 464 439 464V496C479.317 496 512 463.317 512 423H480ZM439 464H217V496H439V464ZM217 464C194.356 464 176 445.644 176 423H144C144 463.317 176.683 496 217 496V464ZM176 423V201H144V423H176ZM176 201C176 178.356 194.356 160 217 160V128C176.683 128 144 160.683 144 201H176ZM431.497 144.333L431.997 120.333L400.003 119.667L399.503 143.667L431.497 144.333ZM432 119.954C431.946 100.888 424.347 82.6173 410.865 69.1349L388.238 91.7624C395.741 99.2658 399.97 109.434 400 120.046L432 119.954ZM410.865 69.1349C397.383 55.6526 379.112 48.0543 360.046 48.0001L359.954 79.9999C370.566 80.0301 380.734 84.2589 388.238 91.7624L410.865 69.1349ZM360 48H144V80H360V48ZM143.953 48.0001C122.767 48.0627 102.467 56.5064 87.4868 71.4868L110.114 94.1142C119.117 85.1118 131.316 80.0376 144.047 79.9999L143.953 48.0001ZM87.4868 71.4868C72.5064 86.4673 64.0627 106.767 64.0001 127.953L95.9999 128.047C96.0376 115.316 101.112 103.117 110.114 94.1142L87.4868 71.4868ZM64 128V344H96V128H64ZM64.0001 344.046C64.0543 363.112 71.6526 381.383 85.1349 394.865L107.762 372.238C100.259 364.734 96.0301 354.566 95.9999 343.954L64.0001 344.046ZM85.1349 394.865C98.6173 408.347 116.888 415.946 135.954 416L136.046 384C125.434 383.97 115.266 379.741 107.762 372.238L85.1349 394.865ZM136 416H160V384H136V416Z" fill="currentColor"></path></svg></div></section><section class="vitepress-demo-preview-source"><div class="language-vue"><pre v-pre class="shiki rose-pine-moon vp-code-dark" ><code><span class="line"><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">template</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">div</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">flex</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">div</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">class</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;block&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">style</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;width: 220px; margin-right: 20px&quot;</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">span</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">class</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;demonstration&quot;</span><span style="color: #6E6A86">&gt;</span><span style="color: #E0DEF4">禁用项</span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">span</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-cascader</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">v-model</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;selected&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">:options</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;options&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">@change</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;handleChange&quot;</span><span style="color: #6E6A86">&gt;&lt;/</span><span style="color: #9CCFD8">b-cascader</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">div</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">div</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">class</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;block&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">style</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;width: 220px; margin-right: 20px&quot;</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">span</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">class</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;demonstration&quot;</span><span style="color: #6E6A86">&gt;</span><span style="color: #E0DEF4">全部禁用</span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">span</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-cascader</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #C4A7E7; font-style: italic">v-model</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;selected&quot;</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #C4A7E7; font-style: italic">:options</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;options&quot;</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #C4A7E7; font-style: italic">disabled</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #C4A7E7; font-style: italic">@change</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;handleChange&quot;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #6E6A86">&gt;&lt;/</span><span style="color: #9CCFD8">b-cascader</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">div</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">div</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">class</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;block&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">style</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;width: 220px; margin-right: 20px&quot;</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">span</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">class</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;demonstration&quot;</span><span style="color: #6E6A86">&gt;</span><span style="color: #E0DEF4">选项值</span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">span</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">div</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">class</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;mt-5&quot;</span><span style="color: #6E6A86">&gt;</span><span style="color: #E0DEF4">{{ selected }}</span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">div</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">div</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">div</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">template</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">script</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">setup</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">lang</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;ts&quot;</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #3E8FB0">import </span><span style="color: #908CAA">{</span><span style="color: #3E8FB0"> </span><span style="color: #E0DEF4; font-style: italic">ref</span><span style="color: #3E8FB0"> </span><span style="color: #908CAA">}</span><span style="color: #3E8FB0"> from </span><span style="color: #F6C177">&#39;vue&#39;</span></span>
<span class="line"></span>
<span class="line"><span style="color: #3E8FB0">const</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">options</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">=</span><span style="color: #E0DEF4"> [</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">    value</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;nanjing&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    label</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;南京&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    disabled</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">true</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    children</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> [</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">        value</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;xuanwu&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">        label</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;玄武区&#39;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">        value</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;gulou&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">        label</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;鼓楼区&#39;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">        value</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;jianye&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">        label</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;建邺区&#39;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">}</span></span>
<span class="line"><span style="color: #E0DEF4">    ]</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">    value</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;xuzhou&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    label</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;徐州&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    children</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> [</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">        value</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;tongshan&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">        label</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;铜山区&#39;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">        value</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;gulou&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">        label</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;鼓楼区&#39;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">        value</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;yunlong&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">        label</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;云龙区&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">        children</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> [</span></span>
<span class="line"><span style="color: #E0DEF4">          </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> value</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;dalonghu&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> label</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;大龙湖街道&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">          </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> value</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;guozhuanglu&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> label</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;郭庄路街道&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">          </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> value</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;lvdi&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> label</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;绿地商务城&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">          </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> value</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;jinlonghu&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> label</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;金龙湖街道&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">}</span></span>
<span class="line"><span style="color: #E0DEF4">        ]</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">        value</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;jiawang&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">        label</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;贾汪区&#39;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> value</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;peixian&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> label</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;沛县&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> value</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;fengxian&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> label</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;丰县&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> value</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;pizhou&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> label</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;邳州市&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> value</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;xinyi&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> label</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;新沂市&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">}</span></span>
<span class="line"><span style="color: #E0DEF4">    ]</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">}</span></span>
<span class="line"><span style="color: #E0DEF4">]</span></span>
<span class="line"><span style="color: #3E8FB0">const</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">selected</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">=</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">ref</span><span style="color: #E0DEF4">([])</span></span>
<span class="line"></span>
<span class="line"><span style="color: #3E8FB0">function</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">handleChange</span><span style="color: #908CAA">(</span><span style="color: #C4A7E7; font-style: italic">value</span><span style="color: #908CAA">)</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #E0DEF4; font-style: italic">console</span><span style="color: #3E8FB0">.</span><span style="color: #EA9A97">log</span><span style="color: #E0DEF4">(</span><span style="color: #E0DEF4; font-style: italic">value</span><span style="color: #E0DEF4">)</span></span>
<span class="line"><span style="color: #908CAA">}</span></span>
<span class="line"><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">script</span><span style="color: #6E6A86">&gt;</span></span></code></pre><pre v-pre class="shiki slack-ochin vp-code-light" ><code><span class="line"><span style="color: #002339">&lt;</span><span style="color: #0444AC">template</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">  &lt;</span><span style="color: #0444AC">div</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">flex</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">    &lt;</span><span style="color: #0444AC">div</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">class</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;block&quot;</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">style</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;width: 220px; margin-right: 20px&quot;</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">      &lt;</span><span style="color: #0444AC">span</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">class</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;demonstration&quot;</span><span style="color: #002339">&gt;禁用项&lt;/</span><span style="color: #0444AC">span</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">      &lt;</span><span style="color: #0444AC">b-cascader</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">v-model</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;selected&quot;</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">:options</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;options&quot;</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">@change</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;handleChange&quot;</span><span style="color: #002339">&gt;&lt;/</span><span style="color: #0444AC">b-cascader</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">    &lt;/</span><span style="color: #0444AC">div</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">    &lt;</span><span style="color: #0444AC">div</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">class</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;block&quot;</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">style</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;width: 220px; margin-right: 20px&quot;</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">      &lt;</span><span style="color: #0444AC">span</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">class</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;demonstration&quot;</span><span style="color: #002339">&gt;全部禁用&lt;/</span><span style="color: #0444AC">span</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">      &lt;</span><span style="color: #0444AC">b-cascader</span></span>
<span class="line"><span style="color: #002339">        </span><span style="color: #DF8618; font-style: italic">v-model</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;selected&quot;</span></span>
<span class="line"><span style="color: #002339">        </span><span style="color: #DF8618; font-style: italic">:options</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;options&quot;</span></span>
<span class="line"><span style="color: #002339">        </span><span style="color: #DF8618; font-style: italic">disabled</span></span>
<span class="line"><span style="color: #002339">        </span><span style="color: #DF8618; font-style: italic">@change</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;handleChange&quot;</span></span>
<span class="line"><span style="color: #002339">      &gt;&lt;/</span><span style="color: #0444AC">b-cascader</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">    &lt;/</span><span style="color: #0444AC">div</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">    &lt;</span><span style="color: #0444AC">div</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">class</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;block&quot;</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">style</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;width: 220px; margin-right: 20px&quot;</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">      &lt;</span><span style="color: #0444AC">span</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">class</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;demonstration&quot;</span><span style="color: #002339">&gt;选项值&lt;/</span><span style="color: #0444AC">span</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">      &lt;</span><span style="color: #0444AC">div</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">class</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;mt-5&quot;</span><span style="color: #002339">&gt;{{ selected }}&lt;/</span><span style="color: #0444AC">div</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">    &lt;/</span><span style="color: #0444AC">div</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">  &lt;/</span><span style="color: #0444AC">div</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">&lt;/</span><span style="color: #0444AC">template</span><span style="color: #002339">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color: #002339">&lt;</span><span style="color: #0444AC">script</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">setup</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">lang</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;ts&quot;</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #7B30D0">import</span><span style="color: #002339"> { </span><span style="color: #2F86D2">ref</span><span style="color: #002339"> } </span><span style="color: #7B30D0">from</span><span style="color: #002339"> </span><span style="color: #A44185">&#39;vue&#39;</span></span>
<span class="line"></span>
<span class="line"><span style="color: #0991B6">const</span><span style="color: #002339"> </span><span style="color: #2F86D2">options</span><span style="color: #002339"> </span><span style="color: #7B30D0">=</span><span style="color: #002339"> [</span></span>
<span class="line"><span style="color: #002339">  {</span></span>
<span class="line"><span style="color: #002339">    value: </span><span style="color: #A44185">&#39;nanjing&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    label: </span><span style="color: #A44185">&#39;南京&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    disabled: </span><span style="color: #174781">true</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    children: [</span></span>
<span class="line"><span style="color: #002339">      {</span></span>
<span class="line"><span style="color: #002339">        value: </span><span style="color: #A44185">&#39;xuanwu&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">        label: </span><span style="color: #A44185">&#39;玄武区&#39;</span></span>
<span class="line"><span style="color: #002339">      },</span></span>
<span class="line"><span style="color: #002339">      {</span></span>
<span class="line"><span style="color: #002339">        value: </span><span style="color: #A44185">&#39;gulou&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">        label: </span><span style="color: #A44185">&#39;鼓楼区&#39;</span></span>
<span class="line"><span style="color: #002339">      },</span></span>
<span class="line"><span style="color: #002339">      {</span></span>
<span class="line"><span style="color: #002339">        value: </span><span style="color: #A44185">&#39;jianye&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">        label: </span><span style="color: #A44185">&#39;建邺区&#39;</span></span>
<span class="line"><span style="color: #002339">      }</span></span>
<span class="line"><span style="color: #002339">    ]</span></span>
<span class="line"><span style="color: #002339">  },</span></span>
<span class="line"><span style="color: #002339">  {</span></span>
<span class="line"><span style="color: #002339">    value: </span><span style="color: #A44185">&#39;xuzhou&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    label: </span><span style="color: #A44185">&#39;徐州&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    children: [</span></span>
<span class="line"><span style="color: #002339">      {</span></span>
<span class="line"><span style="color: #002339">        value: </span><span style="color: #A44185">&#39;tongshan&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">        label: </span><span style="color: #A44185">&#39;铜山区&#39;</span></span>
<span class="line"><span style="color: #002339">      },</span></span>
<span class="line"><span style="color: #002339">      {</span></span>
<span class="line"><span style="color: #002339">        value: </span><span style="color: #A44185">&#39;gulou&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">        label: </span><span style="color: #A44185">&#39;鼓楼区&#39;</span></span>
<span class="line"><span style="color: #002339">      },</span></span>
<span class="line"><span style="color: #002339">      {</span></span>
<span class="line"><span style="color: #002339">        value: </span><span style="color: #A44185">&#39;yunlong&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">        label: </span><span style="color: #A44185">&#39;云龙区&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">        children: [</span></span>
<span class="line"><span style="color: #002339">          { value: </span><span style="color: #A44185">&#39;dalonghu&#39;</span><span style="color: #002339">, label: </span><span style="color: #A44185">&#39;大龙湖街道&#39;</span><span style="color: #002339"> },</span></span>
<span class="line"><span style="color: #002339">          { value: </span><span style="color: #A44185">&#39;guozhuanglu&#39;</span><span style="color: #002339">, label: </span><span style="color: #A44185">&#39;郭庄路街道&#39;</span><span style="color: #002339"> },</span></span>
<span class="line"><span style="color: #002339">          { value: </span><span style="color: #A44185">&#39;lvdi&#39;</span><span style="color: #002339">, label: </span><span style="color: #A44185">&#39;绿地商务城&#39;</span><span style="color: #002339"> },</span></span>
<span class="line"><span style="color: #002339">          { value: </span><span style="color: #A44185">&#39;jinlonghu&#39;</span><span style="color: #002339">, label: </span><span style="color: #A44185">&#39;金龙湖街道&#39;</span><span style="color: #002339"> }</span></span>
<span class="line"><span style="color: #002339">        ]</span></span>
<span class="line"><span style="color: #002339">      },</span></span>
<span class="line"><span style="color: #002339">      {</span></span>
<span class="line"><span style="color: #002339">        value: </span><span style="color: #A44185">&#39;jiawang&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">        label: </span><span style="color: #A44185">&#39;贾汪区&#39;</span></span>
<span class="line"><span style="color: #002339">      },</span></span>
<span class="line"><span style="color: #002339">      { value: </span><span style="color: #A44185">&#39;peixian&#39;</span><span style="color: #002339">, label: </span><span style="color: #A44185">&#39;沛县&#39;</span><span style="color: #002339"> },</span></span>
<span class="line"><span style="color: #002339">      { value: </span><span style="color: #A44185">&#39;fengxian&#39;</span><span style="color: #002339">, label: </span><span style="color: #A44185">&#39;丰县&#39;</span><span style="color: #002339"> },</span></span>
<span class="line"><span style="color: #002339">      { value: </span><span style="color: #A44185">&#39;pizhou&#39;</span><span style="color: #002339">, label: </span><span style="color: #A44185">&#39;邳州市&#39;</span><span style="color: #002339"> },</span></span>
<span class="line"><span style="color: #002339">      { value: </span><span style="color: #A44185">&#39;xinyi&#39;</span><span style="color: #002339">, label: </span><span style="color: #A44185">&#39;新沂市&#39;</span><span style="color: #002339"> }</span></span>
<span class="line"><span style="color: #002339">    ]</span></span>
<span class="line"><span style="color: #002339">  }</span></span>
<span class="line"><span style="color: #002339">]</span></span>
<span class="line"><span style="color: #0991B6">const</span><span style="color: #002339"> </span><span style="color: #2F86D2">selected</span><span style="color: #002339"> </span><span style="color: #7B30D0">=</span><span style="color: #002339"> </span><span style="color: #7EB233">ref</span><span style="color: #002339">([])</span></span>
<span class="line"></span>
<span class="line"><span style="color: #0991B6">function</span><span style="color: #002339"> </span><span style="color: #7EB233">handleChange</span><span style="color: #002339">(</span><span style="color: #B1108E">value</span><span style="color: #002339">) {</span></span>
<span class="line"><span style="color: #002339">  </span><span style="color: #2F86D2">console</span><span style="color: #002339">.</span><span style="color: #7EB233">log</span><span style="color: #002339">(</span><span style="color: #2F86D2">value</span><span style="color: #002339">)</span></span>
<span class="line"><span style="color: #002339">}</span></span>
<span class="line"><span style="color: #002339">&lt;/</span><span style="color: #0444AC">script</span><span style="color: #002339">&gt;</span></span></code></pre></div></section></div><h2 id="可以清空" tabindex="-1">可以清空 <a class="header-anchor" href="#可以清空" aria-label="Permalink to &quot;可以清空&quot;">​</a></h2><p>可以清空选择</p><div class="vitepress-demo-preview__element-plus__container" suffixname="vue" absolutepath="D:\Workspace\MyProject\bin-ui-design\demo\components\demo\Cascader\Clear.vue" relativepath="./demo/Cascader/Clear.vue"><section class="vitepress-demo-preview-preview"><!--[--><div flex><div class="block" style="width:220px;margin-right:20px;"><!--[--><div class="bin-cascader" aria-describedby="bin-popper-4647" style=""><div class="bin-input-wrapper bin-input-type-text"><!--[--><!----><input autocomplete="off" type="text" class="bin-input bin-input-with-suffix" placeholder="" readonly value="" number="false"><!----><span class="bin-input-suffix"><!----><!----><!----><!--[--><i class="b-iconfont b-icon-down"></i><!--]--><!----></span><!----><!----><!----><!--]--></div><!----></div><!--teleport start--><!--teleport end--><!--]--></div><div class="block" style="width:220px;margin-right:20px;"><div class="mt-5">[]</div></div></div><!--]--></section><section class="vitepress-demo-preview-description"><div class="vitepress-demo-preview-description__split-line"></div><div class="vitepress-demo-preview-description__handle-btn"><svg t="1661231422733" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3259" width="20" height="20"><path d="M682.666667 810.666667c-12.8 0-21.333333-4.266667-29.866667-12.8-17.066667-17.066667-17.066667-42.666667 0-59.733334l226.133333-226.133333-226.133333-226.133333c-17.066667-17.066667-17.066667-42.666667 0-59.733334s42.666667-17.066667 59.733333 0l256 256c17.066667 17.066667 17.066667 42.666667 0 59.733334l-256 256c-8.533333 8.533333-17.066667 12.8-29.866666 12.8zM341.333333 810.666667c-12.8 0-21.333333-4.266667-29.866666-12.8l-256-256c-17.066667-17.066667-17.066667-42.666667 0-59.733334l256-256c17.066667-17.066667 42.666667-17.066667 59.733333 0s17.066667 42.666667 0 59.733334L145.066667 512l226.133333 226.133333c17.066667 17.066667 17.066667 42.666667 0 59.733334-8.533333 8.533333-17.066667 12.8-29.866667 12.8z" p-id="3260"></path></svg><svg viewBox="0 0 544 560" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M399.503 143.667C399.319 152.501 406.332 159.812 415.167 159.997C424.001 160.181 431.312 153.168 431.497 144.333L399.503 143.667ZM416 120L431.997 120.333C431.999 120.207 432 120.081 432 119.954L416 120ZM360 64L360.046 48.0001C360.03 48 360.015 48 360 48L360 64ZM144 64V48C143.984 48 143.968 48 143.953 48.0001L144 64ZM80 128L64.0001 127.953C64 127.968 64 127.984 64 128L80 128ZM80 344H64C64 344.015 64 344.03 64.0001 344.046L80 344ZM136 400L135.954 416C135.97 416 135.985 416 136 416L136 400ZM160 416C168.837 416 176 408.837 176 400C176 391.163 168.837 384 160 384V416ZM217 160H439V128H217V160ZM439 160C461.644 160 480 178.356 480 201H512C512 160.683 479.317 128 439 128V160ZM480 201V423H512V201H480ZM480 423C480 445.644 461.644 464 439 464V496C479.317 496 512 463.317 512 423H480ZM439 464H217V496H439V464ZM217 464C194.356 464 176 445.644 176 423H144C144 463.317 176.683 496 217 496V464ZM176 423V201H144V423H176ZM176 201C176 178.356 194.356 160 217 160V128C176.683 128 144 160.683 144 201H176ZM431.497 144.333L431.997 120.333L400.003 119.667L399.503 143.667L431.497 144.333ZM432 119.954C431.946 100.888 424.347 82.6173 410.865 69.1349L388.238 91.7624C395.741 99.2658 399.97 109.434 400 120.046L432 119.954ZM410.865 69.1349C397.383 55.6526 379.112 48.0543 360.046 48.0001L359.954 79.9999C370.566 80.0301 380.734 84.2589 388.238 91.7624L410.865 69.1349ZM360 48H144V80H360V48ZM143.953 48.0001C122.767 48.0627 102.467 56.5064 87.4868 71.4868L110.114 94.1142C119.117 85.1118 131.316 80.0376 144.047 79.9999L143.953 48.0001ZM87.4868 71.4868C72.5064 86.4673 64.0627 106.767 64.0001 127.953L95.9999 128.047C96.0376 115.316 101.112 103.117 110.114 94.1142L87.4868 71.4868ZM64 128V344H96V128H64ZM64.0001 344.046C64.0543 363.112 71.6526 381.383 85.1349 394.865L107.762 372.238C100.259 364.734 96.0301 354.566 95.9999 343.954L64.0001 344.046ZM85.1349 394.865C98.6173 408.347 116.888 415.946 135.954 416L136.046 384C125.434 383.97 115.266 379.741 107.762 372.238L85.1349 394.865ZM136 416H160V384H136V416Z" fill="currentColor"></path></svg></div></section><section class="vitepress-demo-preview-source"><div class="language-vue"><pre v-pre class="shiki rose-pine-moon vp-code-dark" ><code><span class="line"><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">template</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">div</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">flex</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">div</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">class</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;block&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">style</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;width: 220px; margin-right: 20px&quot;</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-cascader</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #C4A7E7; font-style: italic">v-model</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;selected&quot;</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #C4A7E7; font-style: italic">:options</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;options&quot;</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #C4A7E7; font-style: italic">clearable</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #C4A7E7; font-style: italic">@change</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;handleChange&quot;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #6E6A86">&gt;&lt;/</span><span style="color: #9CCFD8">b-cascader</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">div</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">div</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">class</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;block&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">style</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;width: 220px; margin-right: 20px&quot;</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">div</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">class</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;mt-5&quot;</span><span style="color: #6E6A86">&gt;</span><span style="color: #E0DEF4">{{ selected }}</span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">div</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">div</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">div</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">template</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">script</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">setup</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">lang</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;ts&quot;</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #3E8FB0">import </span><span style="color: #908CAA">{</span><span style="color: #3E8FB0"> </span><span style="color: #E0DEF4; font-style: italic">ref</span><span style="color: #3E8FB0"> </span><span style="color: #908CAA">}</span><span style="color: #3E8FB0"> from </span><span style="color: #F6C177">&#39;vue&#39;</span></span>
<span class="line"></span>
<span class="line"><span style="color: #3E8FB0">const</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">options</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">=</span><span style="color: #E0DEF4"> [</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">    value</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;nanjing&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    label</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;南京&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    children</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> [</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">        value</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;xuanwu&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">        label</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;玄武区&#39;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">        value</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;gulou&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">        label</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;鼓楼区&#39;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">        value</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;jianye&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">        label</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;建邺区&#39;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">}</span></span>
<span class="line"><span style="color: #E0DEF4">    ]</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">    value</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;xuzhou&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    label</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;徐州&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    children</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> [</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">        value</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;tongshan&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">        label</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;铜山区&#39;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">        value</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;gulou&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">        label</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;鼓楼区&#39;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">        value</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;yunlong&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">        label</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;云龙区&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">        children</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> [</span></span>
<span class="line"><span style="color: #E0DEF4">          </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> value</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;dalonghu&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> label</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;大龙湖街道&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">          </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> value</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;guozhuanglu&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> label</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;郭庄路街道&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">          </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> value</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;lvdi&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> label</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;绿地商务城&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">          </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> value</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;jinlonghu&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> label</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;金龙湖街道&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">}</span></span>
<span class="line"><span style="color: #E0DEF4">        ]</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">        value</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;jiawang&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">        label</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;贾汪区&#39;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> value</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;peixian&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> label</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;沛县&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> value</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;fengxian&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> label</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;丰县&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> value</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;pizhou&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> label</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;邳州市&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> value</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;xinyi&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> label</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;新沂市&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">}</span></span>
<span class="line"><span style="color: #E0DEF4">    ]</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">}</span></span>
<span class="line"><span style="color: #E0DEF4">]</span></span>
<span class="line"><span style="color: #3E8FB0">const</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">selected</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">=</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">ref</span><span style="color: #E0DEF4">([])</span></span>
<span class="line"></span>
<span class="line"><span style="color: #3E8FB0">function</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">handleChange</span><span style="color: #908CAA">(</span><span style="color: #C4A7E7; font-style: italic">value</span><span style="color: #908CAA">)</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #E0DEF4; font-style: italic">console</span><span style="color: #3E8FB0">.</span><span style="color: #EA9A97">log</span><span style="color: #E0DEF4">(</span><span style="color: #E0DEF4; font-style: italic">value</span><span style="color: #E0DEF4">)</span></span>
<span class="line"><span style="color: #908CAA">}</span></span>
<span class="line"><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">script</span><span style="color: #6E6A86">&gt;</span></span></code></pre><pre v-pre class="shiki slack-ochin vp-code-light" ><code><span class="line"><span style="color: #002339">&lt;</span><span style="color: #0444AC">template</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">  &lt;</span><span style="color: #0444AC">div</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">flex</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">    &lt;</span><span style="color: #0444AC">div</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">class</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;block&quot;</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">style</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;width: 220px; margin-right: 20px&quot;</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">      &lt;</span><span style="color: #0444AC">b-cascader</span></span>
<span class="line"><span style="color: #002339">        </span><span style="color: #DF8618; font-style: italic">v-model</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;selected&quot;</span></span>
<span class="line"><span style="color: #002339">        </span><span style="color: #DF8618; font-style: italic">:options</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;options&quot;</span></span>
<span class="line"><span style="color: #002339">        </span><span style="color: #DF8618; font-style: italic">clearable</span></span>
<span class="line"><span style="color: #002339">        </span><span style="color: #DF8618; font-style: italic">@change</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;handleChange&quot;</span></span>
<span class="line"><span style="color: #002339">      &gt;&lt;/</span><span style="color: #0444AC">b-cascader</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">    &lt;/</span><span style="color: #0444AC">div</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">    &lt;</span><span style="color: #0444AC">div</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">class</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;block&quot;</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">style</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;width: 220px; margin-right: 20px&quot;</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">      &lt;</span><span style="color: #0444AC">div</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">class</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;mt-5&quot;</span><span style="color: #002339">&gt;{{ selected }}&lt;/</span><span style="color: #0444AC">div</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">    &lt;/</span><span style="color: #0444AC">div</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">  &lt;/</span><span style="color: #0444AC">div</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">&lt;/</span><span style="color: #0444AC">template</span><span style="color: #002339">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color: #002339">&lt;</span><span style="color: #0444AC">script</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">setup</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">lang</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;ts&quot;</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #7B30D0">import</span><span style="color: #002339"> { </span><span style="color: #2F86D2">ref</span><span style="color: #002339"> } </span><span style="color: #7B30D0">from</span><span style="color: #002339"> </span><span style="color: #A44185">&#39;vue&#39;</span></span>
<span class="line"></span>
<span class="line"><span style="color: #0991B6">const</span><span style="color: #002339"> </span><span style="color: #2F86D2">options</span><span style="color: #002339"> </span><span style="color: #7B30D0">=</span><span style="color: #002339"> [</span></span>
<span class="line"><span style="color: #002339">  {</span></span>
<span class="line"><span style="color: #002339">    value: </span><span style="color: #A44185">&#39;nanjing&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    label: </span><span style="color: #A44185">&#39;南京&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    children: [</span></span>
<span class="line"><span style="color: #002339">      {</span></span>
<span class="line"><span style="color: #002339">        value: </span><span style="color: #A44185">&#39;xuanwu&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">        label: </span><span style="color: #A44185">&#39;玄武区&#39;</span></span>
<span class="line"><span style="color: #002339">      },</span></span>
<span class="line"><span style="color: #002339">      {</span></span>
<span class="line"><span style="color: #002339">        value: </span><span style="color: #A44185">&#39;gulou&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">        label: </span><span style="color: #A44185">&#39;鼓楼区&#39;</span></span>
<span class="line"><span style="color: #002339">      },</span></span>
<span class="line"><span style="color: #002339">      {</span></span>
<span class="line"><span style="color: #002339">        value: </span><span style="color: #A44185">&#39;jianye&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">        label: </span><span style="color: #A44185">&#39;建邺区&#39;</span></span>
<span class="line"><span style="color: #002339">      }</span></span>
<span class="line"><span style="color: #002339">    ]</span></span>
<span class="line"><span style="color: #002339">  },</span></span>
<span class="line"><span style="color: #002339">  {</span></span>
<span class="line"><span style="color: #002339">    value: </span><span style="color: #A44185">&#39;xuzhou&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    label: </span><span style="color: #A44185">&#39;徐州&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    children: [</span></span>
<span class="line"><span style="color: #002339">      {</span></span>
<span class="line"><span style="color: #002339">        value: </span><span style="color: #A44185">&#39;tongshan&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">        label: </span><span style="color: #A44185">&#39;铜山区&#39;</span></span>
<span class="line"><span style="color: #002339">      },</span></span>
<span class="line"><span style="color: #002339">      {</span></span>
<span class="line"><span style="color: #002339">        value: </span><span style="color: #A44185">&#39;gulou&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">        label: </span><span style="color: #A44185">&#39;鼓楼区&#39;</span></span>
<span class="line"><span style="color: #002339">      },</span></span>
<span class="line"><span style="color: #002339">      {</span></span>
<span class="line"><span style="color: #002339">        value: </span><span style="color: #A44185">&#39;yunlong&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">        label: </span><span style="color: #A44185">&#39;云龙区&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">        children: [</span></span>
<span class="line"><span style="color: #002339">          { value: </span><span style="color: #A44185">&#39;dalonghu&#39;</span><span style="color: #002339">, label: </span><span style="color: #A44185">&#39;大龙湖街道&#39;</span><span style="color: #002339"> },</span></span>
<span class="line"><span style="color: #002339">          { value: </span><span style="color: #A44185">&#39;guozhuanglu&#39;</span><span style="color: #002339">, label: </span><span style="color: #A44185">&#39;郭庄路街道&#39;</span><span style="color: #002339"> },</span></span>
<span class="line"><span style="color: #002339">          { value: </span><span style="color: #A44185">&#39;lvdi&#39;</span><span style="color: #002339">, label: </span><span style="color: #A44185">&#39;绿地商务城&#39;</span><span style="color: #002339"> },</span></span>
<span class="line"><span style="color: #002339">          { value: </span><span style="color: #A44185">&#39;jinlonghu&#39;</span><span style="color: #002339">, label: </span><span style="color: #A44185">&#39;金龙湖街道&#39;</span><span style="color: #002339"> }</span></span>
<span class="line"><span style="color: #002339">        ]</span></span>
<span class="line"><span style="color: #002339">      },</span></span>
<span class="line"><span style="color: #002339">      {</span></span>
<span class="line"><span style="color: #002339">        value: </span><span style="color: #A44185">&#39;jiawang&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">        label: </span><span style="color: #A44185">&#39;贾汪区&#39;</span></span>
<span class="line"><span style="color: #002339">      },</span></span>
<span class="line"><span style="color: #002339">      { value: </span><span style="color: #A44185">&#39;peixian&#39;</span><span style="color: #002339">, label: </span><span style="color: #A44185">&#39;沛县&#39;</span><span style="color: #002339"> },</span></span>
<span class="line"><span style="color: #002339">      { value: </span><span style="color: #A44185">&#39;fengxian&#39;</span><span style="color: #002339">, label: </span><span style="color: #A44185">&#39;丰县&#39;</span><span style="color: #002339"> },</span></span>
<span class="line"><span style="color: #002339">      { value: </span><span style="color: #A44185">&#39;pizhou&#39;</span><span style="color: #002339">, label: </span><span style="color: #A44185">&#39;邳州市&#39;</span><span style="color: #002339"> },</span></span>
<span class="line"><span style="color: #002339">      { value: </span><span style="color: #A44185">&#39;xinyi&#39;</span><span style="color: #002339">, label: </span><span style="color: #A44185">&#39;新沂市&#39;</span><span style="color: #002339"> }</span></span>
<span class="line"><span style="color: #002339">    ]</span></span>
<span class="line"><span style="color: #002339">  }</span></span>
<span class="line"><span style="color: #002339">]</span></span>
<span class="line"><span style="color: #0991B6">const</span><span style="color: #002339"> </span><span style="color: #2F86D2">selected</span><span style="color: #002339"> </span><span style="color: #7B30D0">=</span><span style="color: #002339"> </span><span style="color: #7EB233">ref</span><span style="color: #002339">([])</span></span>
<span class="line"></span>
<span class="line"><span style="color: #0991B6">function</span><span style="color: #002339"> </span><span style="color: #7EB233">handleChange</span><span style="color: #002339">(</span><span style="color: #B1108E">value</span><span style="color: #002339">) {</span></span>
<span class="line"><span style="color: #002339">  </span><span style="color: #2F86D2">console</span><span style="color: #002339">.</span><span style="color: #7EB233">log</span><span style="color: #002339">(</span><span style="color: #2F86D2">value</span><span style="color: #002339">)</span></span>
<span class="line"><span style="color: #002339">}</span></span>
<span class="line"><span style="color: #002339">&lt;/</span><span style="color: #0444AC">script</span><span style="color: #002339">&gt;</span></span></code></pre></div></section></div><h2 id="显示最后一级" tabindex="-1">显示最后一级 <a class="header-anchor" href="#显示最后一级" aria-label="Permalink to &quot;显示最后一级&quot;">​</a></h2><p>输入框可设置只显示最后一级标签</p><div class="vitepress-demo-preview__element-plus__container" suffixname="vue" absolutepath="D:\Workspace\MyProject\bin-ui-design\demo\components\demo\Cascader\Last.vue" relativepath="./demo/Cascader/Last.vue"><section class="vitepress-demo-preview-preview"><!--[--><div flex><div class="block" style="width:220px;margin-right:20px;"><!--[--><div class="bin-cascader" aria-describedby="bin-popper-684" style=""><div class="bin-input-wrapper bin-input-type-text"><!--[--><!----><input autocomplete="off" type="text" class="bin-input bin-input-with-suffix" placeholder="" readonly value="" number="false"><!----><span class="bin-input-suffix"><!----><!----><!----><!--[--><i class="b-iconfont b-icon-down"></i><!--]--><!----></span><!----><!----><!----><!--]--></div><!----></div><!--teleport start--><!--teleport end--><!--]--></div><div class="block" style="width:220px;margin-right:20px;"><div class="mt-5">[]</div></div></div><!--]--></section><section class="vitepress-demo-preview-description"><div class="vitepress-demo-preview-description__split-line"></div><div class="vitepress-demo-preview-description__handle-btn"><svg t="1661231422733" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3259" width="20" height="20"><path d="M682.666667 810.666667c-12.8 0-21.333333-4.266667-29.866667-12.8-17.066667-17.066667-17.066667-42.666667 0-59.733334l226.133333-226.133333-226.133333-226.133333c-17.066667-17.066667-17.066667-42.666667 0-59.733334s42.666667-17.066667 59.733333 0l256 256c17.066667 17.066667 17.066667 42.666667 0 59.733334l-256 256c-8.533333 8.533333-17.066667 12.8-29.866666 12.8zM341.333333 810.666667c-12.8 0-21.333333-4.266667-29.866666-12.8l-256-256c-17.066667-17.066667-17.066667-42.666667 0-59.733334l256-256c17.066667-17.066667 42.666667-17.066667 59.733333 0s17.066667 42.666667 0 59.733334L145.066667 512l226.133333 226.133333c17.066667 17.066667 17.066667 42.666667 0 59.733334-8.533333 8.533333-17.066667 12.8-29.866667 12.8z" p-id="3260"></path></svg><svg viewBox="0 0 544 560" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M399.503 143.667C399.319 152.501 406.332 159.812 415.167 159.997C424.001 160.181 431.312 153.168 431.497 144.333L399.503 143.667ZM416 120L431.997 120.333C431.999 120.207 432 120.081 432 119.954L416 120ZM360 64L360.046 48.0001C360.03 48 360.015 48 360 48L360 64ZM144 64V48C143.984 48 143.968 48 143.953 48.0001L144 64ZM80 128L64.0001 127.953C64 127.968 64 127.984 64 128L80 128ZM80 344H64C64 344.015 64 344.03 64.0001 344.046L80 344ZM136 400L135.954 416C135.97 416 135.985 416 136 416L136 400ZM160 416C168.837 416 176 408.837 176 400C176 391.163 168.837 384 160 384V416ZM217 160H439V128H217V160ZM439 160C461.644 160 480 178.356 480 201H512C512 160.683 479.317 128 439 128V160ZM480 201V423H512V201H480ZM480 423C480 445.644 461.644 464 439 464V496C479.317 496 512 463.317 512 423H480ZM439 464H217V496H439V464ZM217 464C194.356 464 176 445.644 176 423H144C144 463.317 176.683 496 217 496V464ZM176 423V201H144V423H176ZM176 201C176 178.356 194.356 160 217 160V128C176.683 128 144 160.683 144 201H176ZM431.497 144.333L431.997 120.333L400.003 119.667L399.503 143.667L431.497 144.333ZM432 119.954C431.946 100.888 424.347 82.6173 410.865 69.1349L388.238 91.7624C395.741 99.2658 399.97 109.434 400 120.046L432 119.954ZM410.865 69.1349C397.383 55.6526 379.112 48.0543 360.046 48.0001L359.954 79.9999C370.566 80.0301 380.734 84.2589 388.238 91.7624L410.865 69.1349ZM360 48H144V80H360V48ZM143.953 48.0001C122.767 48.0627 102.467 56.5064 87.4868 71.4868L110.114 94.1142C119.117 85.1118 131.316 80.0376 144.047 79.9999L143.953 48.0001ZM87.4868 71.4868C72.5064 86.4673 64.0627 106.767 64.0001 127.953L95.9999 128.047C96.0376 115.316 101.112 103.117 110.114 94.1142L87.4868 71.4868ZM64 128V344H96V128H64ZM64.0001 344.046C64.0543 363.112 71.6526 381.383 85.1349 394.865L107.762 372.238C100.259 364.734 96.0301 354.566 95.9999 343.954L64.0001 344.046ZM85.1349 394.865C98.6173 408.347 116.888 415.946 135.954 416L136.046 384C125.434 383.97 115.266 379.741 107.762 372.238L85.1349 394.865ZM136 416H160V384H136V416Z" fill="currentColor"></path></svg></div></section><section class="vitepress-demo-preview-source"><div class="language-vue"><pre v-pre class="shiki rose-pine-moon vp-code-dark" ><code><span class="line"><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">template</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">div</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">flex</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">div</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">class</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;block&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">style</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;width: 220px; margin-right: 20px&quot;</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-cascader</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #C4A7E7; font-style: italic">v-model</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;selected&quot;</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #C4A7E7; font-style: italic">:options</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;options&quot;</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #C4A7E7; font-style: italic">clearable</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #C4A7E7; font-style: italic">:show-all-levels</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;false&quot;</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #C4A7E7; font-style: italic">@change</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;handleChange&quot;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #6E6A86">&gt;&lt;/</span><span style="color: #9CCFD8">b-cascader</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">div</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">div</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">class</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;block&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">style</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;width: 220px; margin-right: 20px&quot;</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">div</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">class</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;mt-5&quot;</span><span style="color: #6E6A86">&gt;</span><span style="color: #E0DEF4">{{ selected }}</span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">div</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">div</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">div</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">template</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">script</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">setup</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">lang</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;ts&quot;</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #3E8FB0">import </span><span style="color: #908CAA">{</span><span style="color: #3E8FB0"> </span><span style="color: #E0DEF4; font-style: italic">ref</span><span style="color: #3E8FB0"> </span><span style="color: #908CAA">}</span><span style="color: #3E8FB0"> from </span><span style="color: #F6C177">&#39;vue&#39;</span></span>
<span class="line"></span>
<span class="line"><span style="color: #3E8FB0">const</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">options</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">=</span><span style="color: #E0DEF4"> [</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">    value</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;nanjing&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    label</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;南京&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    children</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> [</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">        value</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;xuanwu&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">        label</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;玄武区&#39;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">        value</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;gulou&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">        label</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;鼓楼区&#39;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">        value</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;jianye&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">        label</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;建邺区&#39;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">}</span></span>
<span class="line"><span style="color: #E0DEF4">    ]</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">    value</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;xuzhou&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    label</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;徐州&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    children</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> [</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">        value</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;tongshan&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">        label</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;铜山区&#39;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">        value</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;gulou&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">        label</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;鼓楼区&#39;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">        value</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;yunlong&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">        label</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;云龙区&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">        children</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> [</span></span>
<span class="line"><span style="color: #E0DEF4">          </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> value</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;dalonghu&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> label</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;大龙湖街道&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">          </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> value</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;guozhuanglu&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> label</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;郭庄路街道&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">          </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> value</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;lvdi&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> label</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;绿地商务城&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">          </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> value</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;jinlonghu&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> label</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;金龙湖街道&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">}</span></span>
<span class="line"><span style="color: #E0DEF4">        ]</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">        value</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;jiawang&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">        label</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;贾汪区&#39;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> value</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;peixian&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> label</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;沛县&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> value</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;fengxian&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> label</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;丰县&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> value</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;pizhou&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> label</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;邳州市&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> value</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;xinyi&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> label</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;新沂市&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">}</span></span>
<span class="line"><span style="color: #E0DEF4">    ]</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">}</span></span>
<span class="line"><span style="color: #E0DEF4">]</span></span>
<span class="line"><span style="color: #3E8FB0">const</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">selected</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">=</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">ref</span><span style="color: #E0DEF4">([])</span></span>
<span class="line"></span>
<span class="line"><span style="color: #3E8FB0">function</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">handleChange</span><span style="color: #908CAA">(</span><span style="color: #C4A7E7; font-style: italic">value</span><span style="color: #908CAA">)</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #E0DEF4; font-style: italic">console</span><span style="color: #3E8FB0">.</span><span style="color: #EA9A97">log</span><span style="color: #E0DEF4">(</span><span style="color: #E0DEF4; font-style: italic">value</span><span style="color: #E0DEF4">)</span></span>
<span class="line"><span style="color: #908CAA">}</span></span>
<span class="line"><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">script</span><span style="color: #6E6A86">&gt;</span></span></code></pre><pre v-pre class="shiki slack-ochin vp-code-light" ><code><span class="line"><span style="color: #002339">&lt;</span><span style="color: #0444AC">template</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">  &lt;</span><span style="color: #0444AC">div</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">flex</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">    &lt;</span><span style="color: #0444AC">div</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">class</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;block&quot;</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">style</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;width: 220px; margin-right: 20px&quot;</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">      &lt;</span><span style="color: #0444AC">b-cascader</span></span>
<span class="line"><span style="color: #002339">        </span><span style="color: #DF8618; font-style: italic">v-model</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;selected&quot;</span></span>
<span class="line"><span style="color: #002339">        </span><span style="color: #DF8618; font-style: italic">:options</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;options&quot;</span></span>
<span class="line"><span style="color: #002339">        </span><span style="color: #DF8618; font-style: italic">clearable</span></span>
<span class="line"><span style="color: #002339">        </span><span style="color: #DF8618; font-style: italic">:show-all-levels</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;false&quot;</span></span>
<span class="line"><span style="color: #002339">        </span><span style="color: #DF8618; font-style: italic">@change</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;handleChange&quot;</span></span>
<span class="line"><span style="color: #002339">      &gt;&lt;/</span><span style="color: #0444AC">b-cascader</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">    &lt;/</span><span style="color: #0444AC">div</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">    &lt;</span><span style="color: #0444AC">div</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">class</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;block&quot;</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">style</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;width: 220px; margin-right: 20px&quot;</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">      &lt;</span><span style="color: #0444AC">div</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">class</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;mt-5&quot;</span><span style="color: #002339">&gt;{{ selected }}&lt;/</span><span style="color: #0444AC">div</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">    &lt;/</span><span style="color: #0444AC">div</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">  &lt;/</span><span style="color: #0444AC">div</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">&lt;/</span><span style="color: #0444AC">template</span><span style="color: #002339">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color: #002339">&lt;</span><span style="color: #0444AC">script</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">setup</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">lang</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;ts&quot;</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #7B30D0">import</span><span style="color: #002339"> { </span><span style="color: #2F86D2">ref</span><span style="color: #002339"> } </span><span style="color: #7B30D0">from</span><span style="color: #002339"> </span><span style="color: #A44185">&#39;vue&#39;</span></span>
<span class="line"></span>
<span class="line"><span style="color: #0991B6">const</span><span style="color: #002339"> </span><span style="color: #2F86D2">options</span><span style="color: #002339"> </span><span style="color: #7B30D0">=</span><span style="color: #002339"> [</span></span>
<span class="line"><span style="color: #002339">  {</span></span>
<span class="line"><span style="color: #002339">    value: </span><span style="color: #A44185">&#39;nanjing&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    label: </span><span style="color: #A44185">&#39;南京&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    children: [</span></span>
<span class="line"><span style="color: #002339">      {</span></span>
<span class="line"><span style="color: #002339">        value: </span><span style="color: #A44185">&#39;xuanwu&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">        label: </span><span style="color: #A44185">&#39;玄武区&#39;</span></span>
<span class="line"><span style="color: #002339">      },</span></span>
<span class="line"><span style="color: #002339">      {</span></span>
<span class="line"><span style="color: #002339">        value: </span><span style="color: #A44185">&#39;gulou&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">        label: </span><span style="color: #A44185">&#39;鼓楼区&#39;</span></span>
<span class="line"><span style="color: #002339">      },</span></span>
<span class="line"><span style="color: #002339">      {</span></span>
<span class="line"><span style="color: #002339">        value: </span><span style="color: #A44185">&#39;jianye&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">        label: </span><span style="color: #A44185">&#39;建邺区&#39;</span></span>
<span class="line"><span style="color: #002339">      }</span></span>
<span class="line"><span style="color: #002339">    ]</span></span>
<span class="line"><span style="color: #002339">  },</span></span>
<span class="line"><span style="color: #002339">  {</span></span>
<span class="line"><span style="color: #002339">    value: </span><span style="color: #A44185">&#39;xuzhou&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    label: </span><span style="color: #A44185">&#39;徐州&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    children: [</span></span>
<span class="line"><span style="color: #002339">      {</span></span>
<span class="line"><span style="color: #002339">        value: </span><span style="color: #A44185">&#39;tongshan&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">        label: </span><span style="color: #A44185">&#39;铜山区&#39;</span></span>
<span class="line"><span style="color: #002339">      },</span></span>
<span class="line"><span style="color: #002339">      {</span></span>
<span class="line"><span style="color: #002339">        value: </span><span style="color: #A44185">&#39;gulou&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">        label: </span><span style="color: #A44185">&#39;鼓楼区&#39;</span></span>
<span class="line"><span style="color: #002339">      },</span></span>
<span class="line"><span style="color: #002339">      {</span></span>
<span class="line"><span style="color: #002339">        value: </span><span style="color: #A44185">&#39;yunlong&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">        label: </span><span style="color: #A44185">&#39;云龙区&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">        children: [</span></span>
<span class="line"><span style="color: #002339">          { value: </span><span style="color: #A44185">&#39;dalonghu&#39;</span><span style="color: #002339">, label: </span><span style="color: #A44185">&#39;大龙湖街道&#39;</span><span style="color: #002339"> },</span></span>
<span class="line"><span style="color: #002339">          { value: </span><span style="color: #A44185">&#39;guozhuanglu&#39;</span><span style="color: #002339">, label: </span><span style="color: #A44185">&#39;郭庄路街道&#39;</span><span style="color: #002339"> },</span></span>
<span class="line"><span style="color: #002339">          { value: </span><span style="color: #A44185">&#39;lvdi&#39;</span><span style="color: #002339">, label: </span><span style="color: #A44185">&#39;绿地商务城&#39;</span><span style="color: #002339"> },</span></span>
<span class="line"><span style="color: #002339">          { value: </span><span style="color: #A44185">&#39;jinlonghu&#39;</span><span style="color: #002339">, label: </span><span style="color: #A44185">&#39;金龙湖街道&#39;</span><span style="color: #002339"> }</span></span>
<span class="line"><span style="color: #002339">        ]</span></span>
<span class="line"><span style="color: #002339">      },</span></span>
<span class="line"><span style="color: #002339">      {</span></span>
<span class="line"><span style="color: #002339">        value: </span><span style="color: #A44185">&#39;jiawang&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">        label: </span><span style="color: #A44185">&#39;贾汪区&#39;</span></span>
<span class="line"><span style="color: #002339">      },</span></span>
<span class="line"><span style="color: #002339">      { value: </span><span style="color: #A44185">&#39;peixian&#39;</span><span style="color: #002339">, label: </span><span style="color: #A44185">&#39;沛县&#39;</span><span style="color: #002339"> },</span></span>
<span class="line"><span style="color: #002339">      { value: </span><span style="color: #A44185">&#39;fengxian&#39;</span><span style="color: #002339">, label: </span><span style="color: #A44185">&#39;丰县&#39;</span><span style="color: #002339"> },</span></span>
<span class="line"><span style="color: #002339">      { value: </span><span style="color: #A44185">&#39;pizhou&#39;</span><span style="color: #002339">, label: </span><span style="color: #A44185">&#39;邳州市&#39;</span><span style="color: #002339"> },</span></span>
<span class="line"><span style="color: #002339">      { value: </span><span style="color: #A44185">&#39;xinyi&#39;</span><span style="color: #002339">, label: </span><span style="color: #A44185">&#39;新沂市&#39;</span><span style="color: #002339"> }</span></span>
<span class="line"><span style="color: #002339">    ]</span></span>
<span class="line"><span style="color: #002339">  }</span></span>
<span class="line"><span style="color: #002339">]</span></span>
<span class="line"><span style="color: #0991B6">const</span><span style="color: #002339"> </span><span style="color: #2F86D2">selected</span><span style="color: #002339"> </span><span style="color: #7B30D0">=</span><span style="color: #002339"> </span><span style="color: #7EB233">ref</span><span style="color: #002339">([])</span></span>
<span class="line"></span>
<span class="line"><span style="color: #0991B6">function</span><span style="color: #002339"> </span><span style="color: #7EB233">handleChange</span><span style="color: #002339">(</span><span style="color: #B1108E">value</span><span style="color: #002339">) {</span></span>
<span class="line"><span style="color: #002339">  </span><span style="color: #2F86D2">console</span><span style="color: #002339">.</span><span style="color: #7EB233">log</span><span style="color: #002339">(</span><span style="color: #2F86D2">value</span><span style="color: #002339">)</span></span>
<span class="line"><span style="color: #002339">}</span></span>
<span class="line"><span style="color: #002339">&lt;/</span><span style="color: #0444AC">script</span><span style="color: #002339">&gt;</span></span></code></pre></div></section></div><h2 id="多选模式" tabindex="-1">多选模式 <a class="header-anchor" href="#多选模式" aria-label="Permalink to &quot;多选模式&quot;">​</a></h2><p>可以设置props.multiple来开启多选</p><div class="vitepress-demo-preview__element-plus__container" suffixname="vue" absolutepath="D:\Workspace\MyProject\bin-ui-design\demo\components\demo\Cascader\Multiple.vue" relativepath="./demo/Cascader/Multiple.vue"><section class="vitepress-demo-preview-preview"><!--[--><div flex><div class="block" style="width:220px;margin-right:20px;"><span class="demonstration">默认 显示所有tag</span><!--[--><div class="bin-cascader" aria-describedby="bin-popper-6413" style=""><div class="bin-input-wrapper bin-input-type-text"><!--[--><!----><input autocomplete="off" type="text" class="bin-input bin-input-with-suffix" placeholder="" readonly value="" number="false"><!----><span class="bin-input-suffix"><!----><!----><!----><!--[--><i class="b-iconfont b-icon-down"></i><!--]--><!----></span><!----><!----><!----><!--]--></div><div class="bin-cascader__tags"><!--[--><!--]--><!----></div></div><!--teleport start--><!--teleport end--><!--]--></div><div class="block" style="width:220px;margin-right:20px;"><span class="demonstration">折叠显示tag</span><!--[--><div class="bin-cascader" aria-describedby="bin-popper-6403" style=""><div class="bin-input-wrapper bin-input-type-text"><!--[--><!----><input autocomplete="off" type="text" class="bin-input bin-input-with-suffix" placeholder="" readonly value="" number="false"><!----><span class="bin-input-suffix"><!----><!----><!----><!--[--><i class="b-iconfont b-icon-down"></i><!--]--><!----></span><!----><!----><!----><!--]--></div><div class="bin-cascader__tags"><!--[--><!--]--><!----></div></div><!--teleport start--><!--teleport end--><!--]--></div><div class="block" style="width:calc(100% - 500px);margin-right:20px;"><span class="demonstration">选项值</span><div class="mt-5">[]</div></div></div><!--]--></section><section class="vitepress-demo-preview-description"><div class="vitepress-demo-preview-description__split-line"></div><div class="vitepress-demo-preview-description__handle-btn"><svg t="1661231422733" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3259" width="20" height="20"><path d="M682.666667 810.666667c-12.8 0-21.333333-4.266667-29.866667-12.8-17.066667-17.066667-17.066667-42.666667 0-59.733334l226.133333-226.133333-226.133333-226.133333c-17.066667-17.066667-17.066667-42.666667 0-59.733334s42.666667-17.066667 59.733333 0l256 256c17.066667 17.066667 17.066667 42.666667 0 59.733334l-256 256c-8.533333 8.533333-17.066667 12.8-29.866666 12.8zM341.333333 810.666667c-12.8 0-21.333333-4.266667-29.866666-12.8l-256-256c-17.066667-17.066667-17.066667-42.666667 0-59.733334l256-256c17.066667-17.066667 42.666667-17.066667 59.733333 0s17.066667 42.666667 0 59.733334L145.066667 512l226.133333 226.133333c17.066667 17.066667 17.066667 42.666667 0 59.733334-8.533333 8.533333-17.066667 12.8-29.866667 12.8z" p-id="3260"></path></svg><svg viewBox="0 0 544 560" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M399.503 143.667C399.319 152.501 406.332 159.812 415.167 159.997C424.001 160.181 431.312 153.168 431.497 144.333L399.503 143.667ZM416 120L431.997 120.333C431.999 120.207 432 120.081 432 119.954L416 120ZM360 64L360.046 48.0001C360.03 48 360.015 48 360 48L360 64ZM144 64V48C143.984 48 143.968 48 143.953 48.0001L144 64ZM80 128L64.0001 127.953C64 127.968 64 127.984 64 128L80 128ZM80 344H64C64 344.015 64 344.03 64.0001 344.046L80 344ZM136 400L135.954 416C135.97 416 135.985 416 136 416L136 400ZM160 416C168.837 416 176 408.837 176 400C176 391.163 168.837 384 160 384V416ZM217 160H439V128H217V160ZM439 160C461.644 160 480 178.356 480 201H512C512 160.683 479.317 128 439 128V160ZM480 201V423H512V201H480ZM480 423C480 445.644 461.644 464 439 464V496C479.317 496 512 463.317 512 423H480ZM439 464H217V496H439V464ZM217 464C194.356 464 176 445.644 176 423H144C144 463.317 176.683 496 217 496V464ZM176 423V201H144V423H176ZM176 201C176 178.356 194.356 160 217 160V128C176.683 128 144 160.683 144 201H176ZM431.497 144.333L431.997 120.333L400.003 119.667L399.503 143.667L431.497 144.333ZM432 119.954C431.946 100.888 424.347 82.6173 410.865 69.1349L388.238 91.7624C395.741 99.2658 399.97 109.434 400 120.046L432 119.954ZM410.865 69.1349C397.383 55.6526 379.112 48.0543 360.046 48.0001L359.954 79.9999C370.566 80.0301 380.734 84.2589 388.238 91.7624L410.865 69.1349ZM360 48H144V80H360V48ZM143.953 48.0001C122.767 48.0627 102.467 56.5064 87.4868 71.4868L110.114 94.1142C119.117 85.1118 131.316 80.0376 144.047 79.9999L143.953 48.0001ZM87.4868 71.4868C72.5064 86.4673 64.0627 106.767 64.0001 127.953L95.9999 128.047C96.0376 115.316 101.112 103.117 110.114 94.1142L87.4868 71.4868ZM64 128V344H96V128H64ZM64.0001 344.046C64.0543 363.112 71.6526 381.383 85.1349 394.865L107.762 372.238C100.259 364.734 96.0301 354.566 95.9999 343.954L64.0001 344.046ZM85.1349 394.865C98.6173 408.347 116.888 415.946 135.954 416L136.046 384C125.434 383.97 115.266 379.741 107.762 372.238L85.1349 394.865ZM136 416H160V384H136V416Z" fill="currentColor"></path></svg></div></section><section class="vitepress-demo-preview-source"><div class="language-vue"><pre v-pre class="shiki rose-pine-moon vp-code-dark" ><code><span class="line"><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">template</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">div</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">flex</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">div</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">class</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;block&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">style</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;width: 220px; margin-right: 20px&quot;</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">span</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">class</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;demonstration&quot;</span><span style="color: #6E6A86">&gt;</span><span style="color: #E0DEF4">默认 显示所有tag</span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">span</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-cascader</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #C4A7E7; font-style: italic">v-model</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;selected&quot;</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #C4A7E7; font-style: italic">:options</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;options&quot;</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #C4A7E7; font-style: italic">:props</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;{ multiple: true }&quot;</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #C4A7E7; font-style: italic">@change</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;handleChange&quot;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #6E6A86">&gt;&lt;/</span><span style="color: #9CCFD8">b-cascader</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">div</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">div</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">class</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;block&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">style</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;width: 220px; margin-right: 20px&quot;</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">span</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">class</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;demonstration&quot;</span><span style="color: #6E6A86">&gt;</span><span style="color: #E0DEF4">折叠显示tag</span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">span</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-cascader</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #C4A7E7; font-style: italic">v-model</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;selected&quot;</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #C4A7E7; font-style: italic">:options</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;options&quot;</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #C4A7E7; font-style: italic">:props</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;{ multiple: true }&quot;</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #C4A7E7; font-style: italic">collapse-tags</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #C4A7E7; font-style: italic">@change</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;handleChange&quot;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #6E6A86">&gt;&lt;/</span><span style="color: #9CCFD8">b-cascader</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">div</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">div</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">class</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;block&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">style</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;width: calc(100% - 500px); margin-right: 20px&quot;</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">span</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">class</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;demonstration&quot;</span><span style="color: #6E6A86">&gt;</span><span style="color: #E0DEF4">选项值</span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">span</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">div</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">class</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;mt-5&quot;</span><span style="color: #6E6A86">&gt;</span><span style="color: #E0DEF4">{{ selected }}</span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">div</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">div</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">div</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">template</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">script</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">setup</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">lang</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;ts&quot;</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #3E8FB0">import </span><span style="color: #908CAA">{</span><span style="color: #3E8FB0"> </span><span style="color: #E0DEF4; font-style: italic">ref</span><span style="color: #3E8FB0"> </span><span style="color: #908CAA">}</span><span style="color: #3E8FB0"> from </span><span style="color: #F6C177">&#39;vue&#39;</span></span>
<span class="line"></span>
<span class="line"><span style="color: #3E8FB0">const</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">options</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">=</span><span style="color: #E0DEF4"> [</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">    value</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;nanjing&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    label</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;南京&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    children</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> [</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">        value</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;xuanwu&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">        label</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;玄武区&#39;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">        value</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;gulou&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">        label</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;鼓楼区&#39;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">        value</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;jianye&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">        label</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;建邺区&#39;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">}</span></span>
<span class="line"><span style="color: #E0DEF4">    ]</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">    value</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;xuzhou&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    label</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;徐州&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    children</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> [</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">        value</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;tongshan&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">        label</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;铜山区&#39;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">        value</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;gulou&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">        label</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;鼓楼区&#39;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">        value</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;yunlong&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">        label</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;云龙区&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">        children</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> [</span></span>
<span class="line"><span style="color: #E0DEF4">          </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> value</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;dalonghu&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> label</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;大龙湖街道&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">          </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> value</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;guozhuanglu&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> label</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;郭庄路街道&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">          </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> value</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;lvdi&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> label</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;绿地商务城&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">          </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> value</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;jinlonghu&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> label</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;金龙湖街道&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">}</span></span>
<span class="line"><span style="color: #E0DEF4">        ]</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">        value</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;jiawang&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">        label</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;贾汪区&#39;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> value</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;peixian&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> label</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;沛县&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> value</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;fengxian&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> label</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;丰县&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> value</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;pizhou&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> label</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;邳州市&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> value</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;xinyi&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> label</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;新沂市&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">}</span></span>
<span class="line"><span style="color: #E0DEF4">    ]</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">}</span></span>
<span class="line"><span style="color: #E0DEF4">]</span></span>
<span class="line"><span style="color: #3E8FB0">const</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">selected</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">=</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">ref</span><span style="color: #E0DEF4">([])</span></span>
<span class="line"></span>
<span class="line"><span style="color: #3E8FB0">function</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">handleChange</span><span style="color: #908CAA">(</span><span style="color: #C4A7E7; font-style: italic">value</span><span style="color: #908CAA">)</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #E0DEF4; font-style: italic">console</span><span style="color: #3E8FB0">.</span><span style="color: #EA9A97">log</span><span style="color: #E0DEF4">(</span><span style="color: #E0DEF4; font-style: italic">value</span><span style="color: #E0DEF4">)</span></span>
<span class="line"><span style="color: #908CAA">}</span></span>
<span class="line"><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">script</span><span style="color: #6E6A86">&gt;</span></span></code></pre><pre v-pre class="shiki slack-ochin vp-code-light" ><code><span class="line"><span style="color: #002339">&lt;</span><span style="color: #0444AC">template</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">  &lt;</span><span style="color: #0444AC">div</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">flex</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">    &lt;</span><span style="color: #0444AC">div</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">class</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;block&quot;</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">style</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;width: 220px; margin-right: 20px&quot;</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">      &lt;</span><span style="color: #0444AC">span</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">class</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;demonstration&quot;</span><span style="color: #002339">&gt;默认 显示所有tag&lt;/</span><span style="color: #0444AC">span</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">      &lt;</span><span style="color: #0444AC">b-cascader</span></span>
<span class="line"><span style="color: #002339">        </span><span style="color: #DF8618; font-style: italic">v-model</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;selected&quot;</span></span>
<span class="line"><span style="color: #002339">        </span><span style="color: #DF8618; font-style: italic">:options</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;options&quot;</span></span>
<span class="line"><span style="color: #002339">        </span><span style="color: #DF8618; font-style: italic">:props</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;{ multiple: true }&quot;</span></span>
<span class="line"><span style="color: #002339">        </span><span style="color: #DF8618; font-style: italic">@change</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;handleChange&quot;</span></span>
<span class="line"><span style="color: #002339">      &gt;&lt;/</span><span style="color: #0444AC">b-cascader</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">    &lt;/</span><span style="color: #0444AC">div</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">    &lt;</span><span style="color: #0444AC">div</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">class</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;block&quot;</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">style</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;width: 220px; margin-right: 20px&quot;</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">      &lt;</span><span style="color: #0444AC">span</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">class</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;demonstration&quot;</span><span style="color: #002339">&gt;折叠显示tag&lt;/</span><span style="color: #0444AC">span</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">      &lt;</span><span style="color: #0444AC">b-cascader</span></span>
<span class="line"><span style="color: #002339">        </span><span style="color: #DF8618; font-style: italic">v-model</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;selected&quot;</span></span>
<span class="line"><span style="color: #002339">        </span><span style="color: #DF8618; font-style: italic">:options</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;options&quot;</span></span>
<span class="line"><span style="color: #002339">        </span><span style="color: #DF8618; font-style: italic">:props</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;{ multiple: true }&quot;</span></span>
<span class="line"><span style="color: #002339">        </span><span style="color: #DF8618; font-style: italic">collapse-tags</span></span>
<span class="line"><span style="color: #002339">        </span><span style="color: #DF8618; font-style: italic">@change</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;handleChange&quot;</span></span>
<span class="line"><span style="color: #002339">      &gt;&lt;/</span><span style="color: #0444AC">b-cascader</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">    &lt;/</span><span style="color: #0444AC">div</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">    &lt;</span><span style="color: #0444AC">div</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">class</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;block&quot;</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">style</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;width: calc(100% - 500px); margin-right: 20px&quot;</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">      &lt;</span><span style="color: #0444AC">span</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">class</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;demonstration&quot;</span><span style="color: #002339">&gt;选项值&lt;/</span><span style="color: #0444AC">span</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">      &lt;</span><span style="color: #0444AC">div</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">class</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;mt-5&quot;</span><span style="color: #002339">&gt;{{ selected }}&lt;/</span><span style="color: #0444AC">div</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">    &lt;/</span><span style="color: #0444AC">div</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">  &lt;/</span><span style="color: #0444AC">div</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">&lt;/</span><span style="color: #0444AC">template</span><span style="color: #002339">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color: #002339">&lt;</span><span style="color: #0444AC">script</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">setup</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">lang</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;ts&quot;</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #7B30D0">import</span><span style="color: #002339"> { </span><span style="color: #2F86D2">ref</span><span style="color: #002339"> } </span><span style="color: #7B30D0">from</span><span style="color: #002339"> </span><span style="color: #A44185">&#39;vue&#39;</span></span>
<span class="line"></span>
<span class="line"><span style="color: #0991B6">const</span><span style="color: #002339"> </span><span style="color: #2F86D2">options</span><span style="color: #002339"> </span><span style="color: #7B30D0">=</span><span style="color: #002339"> [</span></span>
<span class="line"><span style="color: #002339">  {</span></span>
<span class="line"><span style="color: #002339">    value: </span><span style="color: #A44185">&#39;nanjing&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    label: </span><span style="color: #A44185">&#39;南京&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    children: [</span></span>
<span class="line"><span style="color: #002339">      {</span></span>
<span class="line"><span style="color: #002339">        value: </span><span style="color: #A44185">&#39;xuanwu&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">        label: </span><span style="color: #A44185">&#39;玄武区&#39;</span></span>
<span class="line"><span style="color: #002339">      },</span></span>
<span class="line"><span style="color: #002339">      {</span></span>
<span class="line"><span style="color: #002339">        value: </span><span style="color: #A44185">&#39;gulou&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">        label: </span><span style="color: #A44185">&#39;鼓楼区&#39;</span></span>
<span class="line"><span style="color: #002339">      },</span></span>
<span class="line"><span style="color: #002339">      {</span></span>
<span class="line"><span style="color: #002339">        value: </span><span style="color: #A44185">&#39;jianye&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">        label: </span><span style="color: #A44185">&#39;建邺区&#39;</span></span>
<span class="line"><span style="color: #002339">      }</span></span>
<span class="line"><span style="color: #002339">    ]</span></span>
<span class="line"><span style="color: #002339">  },</span></span>
<span class="line"><span style="color: #002339">  {</span></span>
<span class="line"><span style="color: #002339">    value: </span><span style="color: #A44185">&#39;xuzhou&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    label: </span><span style="color: #A44185">&#39;徐州&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    children: [</span></span>
<span class="line"><span style="color: #002339">      {</span></span>
<span class="line"><span style="color: #002339">        value: </span><span style="color: #A44185">&#39;tongshan&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">        label: </span><span style="color: #A44185">&#39;铜山区&#39;</span></span>
<span class="line"><span style="color: #002339">      },</span></span>
<span class="line"><span style="color: #002339">      {</span></span>
<span class="line"><span style="color: #002339">        value: </span><span style="color: #A44185">&#39;gulou&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">        label: </span><span style="color: #A44185">&#39;鼓楼区&#39;</span></span>
<span class="line"><span style="color: #002339">      },</span></span>
<span class="line"><span style="color: #002339">      {</span></span>
<span class="line"><span style="color: #002339">        value: </span><span style="color: #A44185">&#39;yunlong&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">        label: </span><span style="color: #A44185">&#39;云龙区&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">        children: [</span></span>
<span class="line"><span style="color: #002339">          { value: </span><span style="color: #A44185">&#39;dalonghu&#39;</span><span style="color: #002339">, label: </span><span style="color: #A44185">&#39;大龙湖街道&#39;</span><span style="color: #002339"> },</span></span>
<span class="line"><span style="color: #002339">          { value: </span><span style="color: #A44185">&#39;guozhuanglu&#39;</span><span style="color: #002339">, label: </span><span style="color: #A44185">&#39;郭庄路街道&#39;</span><span style="color: #002339"> },</span></span>
<span class="line"><span style="color: #002339">          { value: </span><span style="color: #A44185">&#39;lvdi&#39;</span><span style="color: #002339">, label: </span><span style="color: #A44185">&#39;绿地商务城&#39;</span><span style="color: #002339"> },</span></span>
<span class="line"><span style="color: #002339">          { value: </span><span style="color: #A44185">&#39;jinlonghu&#39;</span><span style="color: #002339">, label: </span><span style="color: #A44185">&#39;金龙湖街道&#39;</span><span style="color: #002339"> }</span></span>
<span class="line"><span style="color: #002339">        ]</span></span>
<span class="line"><span style="color: #002339">      },</span></span>
<span class="line"><span style="color: #002339">      {</span></span>
<span class="line"><span style="color: #002339">        value: </span><span style="color: #A44185">&#39;jiawang&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">        label: </span><span style="color: #A44185">&#39;贾汪区&#39;</span></span>
<span class="line"><span style="color: #002339">      },</span></span>
<span class="line"><span style="color: #002339">      { value: </span><span style="color: #A44185">&#39;peixian&#39;</span><span style="color: #002339">, label: </span><span style="color: #A44185">&#39;沛县&#39;</span><span style="color: #002339"> },</span></span>
<span class="line"><span style="color: #002339">      { value: </span><span style="color: #A44185">&#39;fengxian&#39;</span><span style="color: #002339">, label: </span><span style="color: #A44185">&#39;丰县&#39;</span><span style="color: #002339"> },</span></span>
<span class="line"><span style="color: #002339">      { value: </span><span style="color: #A44185">&#39;pizhou&#39;</span><span style="color: #002339">, label: </span><span style="color: #A44185">&#39;邳州市&#39;</span><span style="color: #002339"> },</span></span>
<span class="line"><span style="color: #002339">      { value: </span><span style="color: #A44185">&#39;xinyi&#39;</span><span style="color: #002339">, label: </span><span style="color: #A44185">&#39;新沂市&#39;</span><span style="color: #002339"> }</span></span>
<span class="line"><span style="color: #002339">    ]</span></span>
<span class="line"><span style="color: #002339">  }</span></span>
<span class="line"><span style="color: #002339">]</span></span>
<span class="line"><span style="color: #0991B6">const</span><span style="color: #002339"> </span><span style="color: #2F86D2">selected</span><span style="color: #002339"> </span><span style="color: #7B30D0">=</span><span style="color: #002339"> </span><span style="color: #7EB233">ref</span><span style="color: #002339">([])</span></span>
<span class="line"></span>
<span class="line"><span style="color: #0991B6">function</span><span style="color: #002339"> </span><span style="color: #7EB233">handleChange</span><span style="color: #002339">(</span><span style="color: #B1108E">value</span><span style="color: #002339">) {</span></span>
<span class="line"><span style="color: #002339">  </span><span style="color: #2F86D2">console</span><span style="color: #002339">.</span><span style="color: #7EB233">log</span><span style="color: #002339">(</span><span style="color: #2F86D2">value</span><span style="color: #002339">)</span></span>
<span class="line"><span style="color: #002339">}</span></span>
<span class="line"><span style="color: #002339">&lt;/</span><span style="color: #0444AC">script</span><span style="color: #002339">&gt;</span></span></code></pre></div></section></div><h2 id="选择任意一级选项" tabindex="-1">选择任意一级选项 <a class="header-anchor" href="#选择任意一级选项" aria-label="Permalink to &quot;选择任意一级选项&quot;">​</a></h2><p>在单选模式下，你只能选择叶子节点；而在多选模式下，勾选父节点真正选中的都是叶子节点。启用该功能后，可让父子节点取消关联，选择任意一级选项</p><p>可通过 props.checkStrictly = true 来设置父子节点取消选中关联，从而达到选择任意一级选项的目的。</p><div class="vitepress-demo-preview__element-plus__container" suffixname="vue" absolutepath="D:\Workspace\MyProject\bin-ui-design\demo\components\demo\Cascader\Any.vue" relativepath="./demo/Cascader/Any.vue"><section class="vitepress-demo-preview-preview"><!--[--><div flex><div class="block" style="width:220px;margin-right:20px;"><span class="demonstration">单选选择任意一级选项</span><!--[--><div class="bin-cascader" aria-describedby="bin-popper-619" style=""><div class="bin-input-wrapper bin-input-type-text"><!--[--><!----><input autocomplete="off" type="text" class="bin-input bin-input-with-suffix" placeholder="" readonly value="" number="false"><!----><span class="bin-input-suffix"><!----><!----><!----><!--[--><i class="b-iconfont b-icon-down"></i><!--]--><!----></span><!----><!----><!----><!--]--></div><!----></div><!--teleport start--><!--teleport end--><!--]--><div class="mt-5">[]</div></div><div class="block" style="width:220px;margin-right:20px;"><span class="demonstration">多选选择任意一级选项</span><!--[--><div class="bin-cascader" aria-describedby="bin-popper-2239" style=""><div class="bin-input-wrapper bin-input-type-text"><!--[--><!----><input autocomplete="off" type="text" class="bin-input bin-input-with-suffix" placeholder="" readonly value="" number="false"><!----><span class="bin-input-suffix"><!----><!----><!----><!--[--><i class="b-iconfont b-icon-down"></i><!--]--><!----></span><!----><!----><!----><!--]--></div><div class="bin-cascader__tags"><!--[--><!--]--><!----></div></div><!--teleport start--><!--teleport end--><!--]--><div class="mt-5">[]</div></div></div><!--]--></section><section class="vitepress-demo-preview-description"><div class="vitepress-demo-preview-description__split-line"></div><div class="vitepress-demo-preview-description__handle-btn"><svg t="1661231422733" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3259" width="20" height="20"><path d="M682.666667 810.666667c-12.8 0-21.333333-4.266667-29.866667-12.8-17.066667-17.066667-17.066667-42.666667 0-59.733334l226.133333-226.133333-226.133333-226.133333c-17.066667-17.066667-17.066667-42.666667 0-59.733334s42.666667-17.066667 59.733333 0l256 256c17.066667 17.066667 17.066667 42.666667 0 59.733334l-256 256c-8.533333 8.533333-17.066667 12.8-29.866666 12.8zM341.333333 810.666667c-12.8 0-21.333333-4.266667-29.866666-12.8l-256-256c-17.066667-17.066667-17.066667-42.666667 0-59.733334l256-256c17.066667-17.066667 42.666667-17.066667 59.733333 0s17.066667 42.666667 0 59.733334L145.066667 512l226.133333 226.133333c17.066667 17.066667 17.066667 42.666667 0 59.733334-8.533333 8.533333-17.066667 12.8-29.866667 12.8z" p-id="3260"></path></svg><svg viewBox="0 0 544 560" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M399.503 143.667C399.319 152.501 406.332 159.812 415.167 159.997C424.001 160.181 431.312 153.168 431.497 144.333L399.503 143.667ZM416 120L431.997 120.333C431.999 120.207 432 120.081 432 119.954L416 120ZM360 64L360.046 48.0001C360.03 48 360.015 48 360 48L360 64ZM144 64V48C143.984 48 143.968 48 143.953 48.0001L144 64ZM80 128L64.0001 127.953C64 127.968 64 127.984 64 128L80 128ZM80 344H64C64 344.015 64 344.03 64.0001 344.046L80 344ZM136 400L135.954 416C135.97 416 135.985 416 136 416L136 400ZM160 416C168.837 416 176 408.837 176 400C176 391.163 168.837 384 160 384V416ZM217 160H439V128H217V160ZM439 160C461.644 160 480 178.356 480 201H512C512 160.683 479.317 128 439 128V160ZM480 201V423H512V201H480ZM480 423C480 445.644 461.644 464 439 464V496C479.317 496 512 463.317 512 423H480ZM439 464H217V496H439V464ZM217 464C194.356 464 176 445.644 176 423H144C144 463.317 176.683 496 217 496V464ZM176 423V201H144V423H176ZM176 201C176 178.356 194.356 160 217 160V128C176.683 128 144 160.683 144 201H176ZM431.497 144.333L431.997 120.333L400.003 119.667L399.503 143.667L431.497 144.333ZM432 119.954C431.946 100.888 424.347 82.6173 410.865 69.1349L388.238 91.7624C395.741 99.2658 399.97 109.434 400 120.046L432 119.954ZM410.865 69.1349C397.383 55.6526 379.112 48.0543 360.046 48.0001L359.954 79.9999C370.566 80.0301 380.734 84.2589 388.238 91.7624L410.865 69.1349ZM360 48H144V80H360V48ZM143.953 48.0001C122.767 48.0627 102.467 56.5064 87.4868 71.4868L110.114 94.1142C119.117 85.1118 131.316 80.0376 144.047 79.9999L143.953 48.0001ZM87.4868 71.4868C72.5064 86.4673 64.0627 106.767 64.0001 127.953L95.9999 128.047C96.0376 115.316 101.112 103.117 110.114 94.1142L87.4868 71.4868ZM64 128V344H96V128H64ZM64.0001 344.046C64.0543 363.112 71.6526 381.383 85.1349 394.865L107.762 372.238C100.259 364.734 96.0301 354.566 95.9999 343.954L64.0001 344.046ZM85.1349 394.865C98.6173 408.347 116.888 415.946 135.954 416L136.046 384C125.434 383.97 115.266 379.741 107.762 372.238L85.1349 394.865ZM136 416H160V384H136V416Z" fill="currentColor"></path></svg></div></section><section class="vitepress-demo-preview-source"><div class="language-vue"><pre v-pre class="shiki rose-pine-moon vp-code-dark" ><code><span class="line"><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">template</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">div</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">flex</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">div</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">class</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;block&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">style</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;width: 220px; margin-right: 20px&quot;</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">span</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">class</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;demonstration&quot;</span><span style="color: #6E6A86">&gt;</span><span style="color: #E0DEF4">单选选择任意一级选项</span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">span</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-cascader</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #C4A7E7; font-style: italic">v-model</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;selected1&quot;</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #C4A7E7; font-style: italic">:options</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;options&quot;</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #C4A7E7; font-style: italic">:props</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;{ checkStrictly: true }&quot;</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #C4A7E7; font-style: italic">@change</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;handleChange&quot;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #6E6A86">&gt;&lt;/</span><span style="color: #9CCFD8">b-cascader</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">div</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">class</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;mt-5&quot;</span><span style="color: #6E6A86">&gt;</span><span style="color: #E0DEF4">{{ selected1 }}</span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">div</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">div</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">div</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">class</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;block&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">style</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;width: 220px; margin-right: 20px&quot;</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">span</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">class</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;demonstration&quot;</span><span style="color: #6E6A86">&gt;</span><span style="color: #E0DEF4">多选选择任意一级选项</span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">span</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-cascader</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #C4A7E7; font-style: italic">v-model</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;selected2&quot;</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #C4A7E7; font-style: italic">:options</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;options&quot;</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #C4A7E7; font-style: italic">:props</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;{ multiple: true, checkStrictly: true }&quot;</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #C4A7E7; font-style: italic">collapse-tags</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #C4A7E7; font-style: italic">@change</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;handleChange&quot;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #6E6A86">&gt;&lt;/</span><span style="color: #9CCFD8">b-cascader</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">div</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">class</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;mt-5&quot;</span><span style="color: #6E6A86">&gt;</span><span style="color: #E0DEF4">{{ selected2 }}</span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">div</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">div</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">div</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">template</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">script</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">setup</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">lang</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;ts&quot;</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #3E8FB0">import </span><span style="color: #908CAA">{</span><span style="color: #3E8FB0"> </span><span style="color: #E0DEF4; font-style: italic">ref</span><span style="color: #3E8FB0"> </span><span style="color: #908CAA">}</span><span style="color: #3E8FB0"> from </span><span style="color: #F6C177">&#39;vue&#39;</span></span>
<span class="line"></span>
<span class="line"><span style="color: #3E8FB0">const</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">options</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">=</span><span style="color: #E0DEF4"> [</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">    value</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;nanjing&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    label</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;南京&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    children</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> [</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">        value</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;xuanwu&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">        label</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;玄武区&#39;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">        value</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;gulou&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">        label</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;鼓楼区&#39;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">        value</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;jianye&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">        label</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;建邺区&#39;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">}</span></span>
<span class="line"><span style="color: #E0DEF4">    ]</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">    value</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;xuzhou&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    label</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;徐州&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    children</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> [</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">        value</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;tongshan&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">        label</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;铜山区&#39;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">        value</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;gulou&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">        label</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;鼓楼区&#39;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">        value</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;yunlong&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">        label</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;云龙区&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">        children</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> [</span></span>
<span class="line"><span style="color: #E0DEF4">          </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> value</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;dalonghu&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> label</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;大龙湖街道&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">          </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> value</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;guozhuanglu&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> label</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;郭庄路街道&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">          </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> value</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;lvdi&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> label</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;绿地商务城&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">          </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> value</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;jinlonghu&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> label</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;金龙湖街道&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">}</span></span>
<span class="line"><span style="color: #E0DEF4">        ]</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">        value</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;jiawang&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">        label</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;贾汪区&#39;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> value</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;peixian&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> label</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;沛县&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> value</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;fengxian&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> label</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;丰县&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> value</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;pizhou&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> label</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;邳州市&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> value</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;xinyi&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> label</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;新沂市&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">}</span></span>
<span class="line"><span style="color: #E0DEF4">    ]</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">}</span></span>
<span class="line"><span style="color: #E0DEF4">]</span></span>
<span class="line"><span style="color: #3E8FB0">const</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">selected1</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">=</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">ref</span><span style="color: #E0DEF4">([])</span></span>
<span class="line"><span style="color: #3E8FB0">const</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">selected2</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">=</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">ref</span><span style="color: #E0DEF4">([])</span></span>
<span class="line"></span>
<span class="line"><span style="color: #3E8FB0">function</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">handleChange</span><span style="color: #908CAA">(</span><span style="color: #C4A7E7; font-style: italic">value</span><span style="color: #908CAA">)</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #E0DEF4; font-style: italic">console</span><span style="color: #3E8FB0">.</span><span style="color: #EA9A97">log</span><span style="color: #E0DEF4">(</span><span style="color: #E0DEF4; font-style: italic">value</span><span style="color: #E0DEF4">)</span></span>
<span class="line"><span style="color: #908CAA">}</span></span>
<span class="line"><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">script</span><span style="color: #6E6A86">&gt;</span></span></code></pre><pre v-pre class="shiki slack-ochin vp-code-light" ><code><span class="line"><span style="color: #002339">&lt;</span><span style="color: #0444AC">template</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">  &lt;</span><span style="color: #0444AC">div</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">flex</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">    &lt;</span><span style="color: #0444AC">div</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">class</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;block&quot;</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">style</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;width: 220px; margin-right: 20px&quot;</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">      &lt;</span><span style="color: #0444AC">span</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">class</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;demonstration&quot;</span><span style="color: #002339">&gt;单选选择任意一级选项&lt;/</span><span style="color: #0444AC">span</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">      &lt;</span><span style="color: #0444AC">b-cascader</span></span>
<span class="line"><span style="color: #002339">        </span><span style="color: #DF8618; font-style: italic">v-model</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;selected1&quot;</span></span>
<span class="line"><span style="color: #002339">        </span><span style="color: #DF8618; font-style: italic">:options</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;options&quot;</span></span>
<span class="line"><span style="color: #002339">        </span><span style="color: #DF8618; font-style: italic">:props</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;{ checkStrictly: true }&quot;</span></span>
<span class="line"><span style="color: #002339">        </span><span style="color: #DF8618; font-style: italic">@change</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;handleChange&quot;</span></span>
<span class="line"><span style="color: #002339">      &gt;&lt;/</span><span style="color: #0444AC">b-cascader</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">      &lt;</span><span style="color: #0444AC">div</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">class</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;mt-5&quot;</span><span style="color: #002339">&gt;{{ selected1 }}&lt;/</span><span style="color: #0444AC">div</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">    &lt;/</span><span style="color: #0444AC">div</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">    &lt;</span><span style="color: #0444AC">div</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">class</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;block&quot;</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">style</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;width: 220px; margin-right: 20px&quot;</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">      &lt;</span><span style="color: #0444AC">span</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">class</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;demonstration&quot;</span><span style="color: #002339">&gt;多选选择任意一级选项&lt;/</span><span style="color: #0444AC">span</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">      &lt;</span><span style="color: #0444AC">b-cascader</span></span>
<span class="line"><span style="color: #002339">        </span><span style="color: #DF8618; font-style: italic">v-model</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;selected2&quot;</span></span>
<span class="line"><span style="color: #002339">        </span><span style="color: #DF8618; font-style: italic">:options</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;options&quot;</span></span>
<span class="line"><span style="color: #002339">        </span><span style="color: #DF8618; font-style: italic">:props</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;{ multiple: true, checkStrictly: true }&quot;</span></span>
<span class="line"><span style="color: #002339">        </span><span style="color: #DF8618; font-style: italic">collapse-tags</span></span>
<span class="line"><span style="color: #002339">        </span><span style="color: #DF8618; font-style: italic">@change</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;handleChange&quot;</span></span>
<span class="line"><span style="color: #002339">      &gt;&lt;/</span><span style="color: #0444AC">b-cascader</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">      &lt;</span><span style="color: #0444AC">div</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">class</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;mt-5&quot;</span><span style="color: #002339">&gt;{{ selected2 }}&lt;/</span><span style="color: #0444AC">div</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">    &lt;/</span><span style="color: #0444AC">div</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">  &lt;/</span><span style="color: #0444AC">div</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">&lt;/</span><span style="color: #0444AC">template</span><span style="color: #002339">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color: #002339">&lt;</span><span style="color: #0444AC">script</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">setup</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">lang</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;ts&quot;</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #7B30D0">import</span><span style="color: #002339"> { </span><span style="color: #2F86D2">ref</span><span style="color: #002339"> } </span><span style="color: #7B30D0">from</span><span style="color: #002339"> </span><span style="color: #A44185">&#39;vue&#39;</span></span>
<span class="line"></span>
<span class="line"><span style="color: #0991B6">const</span><span style="color: #002339"> </span><span style="color: #2F86D2">options</span><span style="color: #002339"> </span><span style="color: #7B30D0">=</span><span style="color: #002339"> [</span></span>
<span class="line"><span style="color: #002339">  {</span></span>
<span class="line"><span style="color: #002339">    value: </span><span style="color: #A44185">&#39;nanjing&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    label: </span><span style="color: #A44185">&#39;南京&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    children: [</span></span>
<span class="line"><span style="color: #002339">      {</span></span>
<span class="line"><span style="color: #002339">        value: </span><span style="color: #A44185">&#39;xuanwu&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">        label: </span><span style="color: #A44185">&#39;玄武区&#39;</span></span>
<span class="line"><span style="color: #002339">      },</span></span>
<span class="line"><span style="color: #002339">      {</span></span>
<span class="line"><span style="color: #002339">        value: </span><span style="color: #A44185">&#39;gulou&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">        label: </span><span style="color: #A44185">&#39;鼓楼区&#39;</span></span>
<span class="line"><span style="color: #002339">      },</span></span>
<span class="line"><span style="color: #002339">      {</span></span>
<span class="line"><span style="color: #002339">        value: </span><span style="color: #A44185">&#39;jianye&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">        label: </span><span style="color: #A44185">&#39;建邺区&#39;</span></span>
<span class="line"><span style="color: #002339">      }</span></span>
<span class="line"><span style="color: #002339">    ]</span></span>
<span class="line"><span style="color: #002339">  },</span></span>
<span class="line"><span style="color: #002339">  {</span></span>
<span class="line"><span style="color: #002339">    value: </span><span style="color: #A44185">&#39;xuzhou&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    label: </span><span style="color: #A44185">&#39;徐州&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    children: [</span></span>
<span class="line"><span style="color: #002339">      {</span></span>
<span class="line"><span style="color: #002339">        value: </span><span style="color: #A44185">&#39;tongshan&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">        label: </span><span style="color: #A44185">&#39;铜山区&#39;</span></span>
<span class="line"><span style="color: #002339">      },</span></span>
<span class="line"><span style="color: #002339">      {</span></span>
<span class="line"><span style="color: #002339">        value: </span><span style="color: #A44185">&#39;gulou&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">        label: </span><span style="color: #A44185">&#39;鼓楼区&#39;</span></span>
<span class="line"><span style="color: #002339">      },</span></span>
<span class="line"><span style="color: #002339">      {</span></span>
<span class="line"><span style="color: #002339">        value: </span><span style="color: #A44185">&#39;yunlong&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">        label: </span><span style="color: #A44185">&#39;云龙区&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">        children: [</span></span>
<span class="line"><span style="color: #002339">          { value: </span><span style="color: #A44185">&#39;dalonghu&#39;</span><span style="color: #002339">, label: </span><span style="color: #A44185">&#39;大龙湖街道&#39;</span><span style="color: #002339"> },</span></span>
<span class="line"><span style="color: #002339">          { value: </span><span style="color: #A44185">&#39;guozhuanglu&#39;</span><span style="color: #002339">, label: </span><span style="color: #A44185">&#39;郭庄路街道&#39;</span><span style="color: #002339"> },</span></span>
<span class="line"><span style="color: #002339">          { value: </span><span style="color: #A44185">&#39;lvdi&#39;</span><span style="color: #002339">, label: </span><span style="color: #A44185">&#39;绿地商务城&#39;</span><span style="color: #002339"> },</span></span>
<span class="line"><span style="color: #002339">          { value: </span><span style="color: #A44185">&#39;jinlonghu&#39;</span><span style="color: #002339">, label: </span><span style="color: #A44185">&#39;金龙湖街道&#39;</span><span style="color: #002339"> }</span></span>
<span class="line"><span style="color: #002339">        ]</span></span>
<span class="line"><span style="color: #002339">      },</span></span>
<span class="line"><span style="color: #002339">      {</span></span>
<span class="line"><span style="color: #002339">        value: </span><span style="color: #A44185">&#39;jiawang&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">        label: </span><span style="color: #A44185">&#39;贾汪区&#39;</span></span>
<span class="line"><span style="color: #002339">      },</span></span>
<span class="line"><span style="color: #002339">      { value: </span><span style="color: #A44185">&#39;peixian&#39;</span><span style="color: #002339">, label: </span><span style="color: #A44185">&#39;沛县&#39;</span><span style="color: #002339"> },</span></span>
<span class="line"><span style="color: #002339">      { value: </span><span style="color: #A44185">&#39;fengxian&#39;</span><span style="color: #002339">, label: </span><span style="color: #A44185">&#39;丰县&#39;</span><span style="color: #002339"> },</span></span>
<span class="line"><span style="color: #002339">      { value: </span><span style="color: #A44185">&#39;pizhou&#39;</span><span style="color: #002339">, label: </span><span style="color: #A44185">&#39;邳州市&#39;</span><span style="color: #002339"> },</span></span>
<span class="line"><span style="color: #002339">      { value: </span><span style="color: #A44185">&#39;xinyi&#39;</span><span style="color: #002339">, label: </span><span style="color: #A44185">&#39;新沂市&#39;</span><span style="color: #002339"> }</span></span>
<span class="line"><span style="color: #002339">    ]</span></span>
<span class="line"><span style="color: #002339">  }</span></span>
<span class="line"><span style="color: #002339">]</span></span>
<span class="line"><span style="color: #0991B6">const</span><span style="color: #002339"> </span><span style="color: #2F86D2">selected1</span><span style="color: #002339"> </span><span style="color: #7B30D0">=</span><span style="color: #002339"> </span><span style="color: #7EB233">ref</span><span style="color: #002339">([])</span></span>
<span class="line"><span style="color: #0991B6">const</span><span style="color: #002339"> </span><span style="color: #2F86D2">selected2</span><span style="color: #002339"> </span><span style="color: #7B30D0">=</span><span style="color: #002339"> </span><span style="color: #7EB233">ref</span><span style="color: #002339">([])</span></span>
<span class="line"></span>
<span class="line"><span style="color: #0991B6">function</span><span style="color: #002339"> </span><span style="color: #7EB233">handleChange</span><span style="color: #002339">(</span><span style="color: #B1108E">value</span><span style="color: #002339">) {</span></span>
<span class="line"><span style="color: #002339">  </span><span style="color: #2F86D2">console</span><span style="color: #002339">.</span><span style="color: #7EB233">log</span><span style="color: #002339">(</span><span style="color: #2F86D2">value</span><span style="color: #002339">)</span></span>
<span class="line"><span style="color: #002339">}</span></span>
<span class="line"><span style="color: #002339">&lt;/</span><span style="color: #0444AC">script</span><span style="color: #002339">&gt;</span></span></code></pre></div></section></div><h2 id="动态加载" tabindex="-1">动态加载 <a class="header-anchor" href="#动态加载" aria-label="Permalink to &quot;动态加载&quot;">​</a></h2><p>选中某一级时，动态加载之下的选项, 通过lazy开启动态加载，并通过lazyload来设置加载数据源的方法</p><p>lazyload方法有两个参数，第一个参数node为当前点击的节点，第二个resolve为数据加载完成的回调(必须调用)。为了更准确的显示节点的状态，还可以对节点数据添加是否为叶子节点的标志位 ( 默认字段为leaf，可通过props.leaf修改)，否则会简单的以有无子节点来判断是否为叶子节点。</p><div class="vitepress-demo-preview__element-plus__container" suffixname="vue" absolutepath="D:\Workspace\MyProject\bin-ui-design\demo\components\demo\Cascader\Lazy.vue" relativepath="./demo/Cascader/Lazy.vue"><section class="vitepress-demo-preview-preview"><!--[--><div flex><div class="block" style="width:220px;margin-right:20px;"><!--[--><div class="bin-cascader" aria-describedby="bin-popper-9862" style=""><div class="bin-input-wrapper bin-input-type-text"><!--[--><!----><input autocomplete="off" type="text" class="bin-input bin-input-with-suffix" placeholder="" readonly value="" number="false"><!----><span class="bin-input-suffix"><!----><!----><!----><!--[--><i class="b-iconfont b-icon-down"></i><!--]--><!----></span><!----><!----><!----><!--]--></div><!----></div><!--teleport start--><!--teleport end--><!--]--></div><div class="block" style="width:220px;margin-right:20px;"><div class="mt-5">[]</div></div></div><!--]--></section><section class="vitepress-demo-preview-description"><div class="vitepress-demo-preview-description__split-line"></div><div class="vitepress-demo-preview-description__handle-btn"><svg t="1661231422733" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3259" width="20" height="20"><path d="M682.666667 810.666667c-12.8 0-21.333333-4.266667-29.866667-12.8-17.066667-17.066667-17.066667-42.666667 0-59.733334l226.133333-226.133333-226.133333-226.133333c-17.066667-17.066667-17.066667-42.666667 0-59.733334s42.666667-17.066667 59.733333 0l256 256c17.066667 17.066667 17.066667 42.666667 0 59.733334l-256 256c-8.533333 8.533333-17.066667 12.8-29.866666 12.8zM341.333333 810.666667c-12.8 0-21.333333-4.266667-29.866666-12.8l-256-256c-17.066667-17.066667-17.066667-42.666667 0-59.733334l256-256c17.066667-17.066667 42.666667-17.066667 59.733333 0s17.066667 42.666667 0 59.733334L145.066667 512l226.133333 226.133333c17.066667 17.066667 17.066667 42.666667 0 59.733334-8.533333 8.533333-17.066667 12.8-29.866667 12.8z" p-id="3260"></path></svg><svg viewBox="0 0 544 560" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M399.503 143.667C399.319 152.501 406.332 159.812 415.167 159.997C424.001 160.181 431.312 153.168 431.497 144.333L399.503 143.667ZM416 120L431.997 120.333C431.999 120.207 432 120.081 432 119.954L416 120ZM360 64L360.046 48.0001C360.03 48 360.015 48 360 48L360 64ZM144 64V48C143.984 48 143.968 48 143.953 48.0001L144 64ZM80 128L64.0001 127.953C64 127.968 64 127.984 64 128L80 128ZM80 344H64C64 344.015 64 344.03 64.0001 344.046L80 344ZM136 400L135.954 416C135.97 416 135.985 416 136 416L136 400ZM160 416C168.837 416 176 408.837 176 400C176 391.163 168.837 384 160 384V416ZM217 160H439V128H217V160ZM439 160C461.644 160 480 178.356 480 201H512C512 160.683 479.317 128 439 128V160ZM480 201V423H512V201H480ZM480 423C480 445.644 461.644 464 439 464V496C479.317 496 512 463.317 512 423H480ZM439 464H217V496H439V464ZM217 464C194.356 464 176 445.644 176 423H144C144 463.317 176.683 496 217 496V464ZM176 423V201H144V423H176ZM176 201C176 178.356 194.356 160 217 160V128C176.683 128 144 160.683 144 201H176ZM431.497 144.333L431.997 120.333L400.003 119.667L399.503 143.667L431.497 144.333ZM432 119.954C431.946 100.888 424.347 82.6173 410.865 69.1349L388.238 91.7624C395.741 99.2658 399.97 109.434 400 120.046L432 119.954ZM410.865 69.1349C397.383 55.6526 379.112 48.0543 360.046 48.0001L359.954 79.9999C370.566 80.0301 380.734 84.2589 388.238 91.7624L410.865 69.1349ZM360 48H144V80H360V48ZM143.953 48.0001C122.767 48.0627 102.467 56.5064 87.4868 71.4868L110.114 94.1142C119.117 85.1118 131.316 80.0376 144.047 79.9999L143.953 48.0001ZM87.4868 71.4868C72.5064 86.4673 64.0627 106.767 64.0001 127.953L95.9999 128.047C96.0376 115.316 101.112 103.117 110.114 94.1142L87.4868 71.4868ZM64 128V344H96V128H64ZM64.0001 344.046C64.0543 363.112 71.6526 381.383 85.1349 394.865L107.762 372.238C100.259 364.734 96.0301 354.566 95.9999 343.954L64.0001 344.046ZM85.1349 394.865C98.6173 408.347 116.888 415.946 135.954 416L136.046 384C125.434 383.97 115.266 379.741 107.762 372.238L85.1349 394.865ZM136 416H160V384H136V416Z" fill="currentColor"></path></svg></div></section><section class="vitepress-demo-preview-source"><div class="language-vue"><pre v-pre class="shiki rose-pine-moon vp-code-dark" ><code><span class="line"><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">template</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">div</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">flex</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">div</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">class</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;block&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">style</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;width: 220px; margin-right: 20px&quot;</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-cascader</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">v-model</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;selected&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">:props</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;props&quot;</span><span style="color: #6E6A86">&gt;&lt;/</span><span style="color: #9CCFD8">b-cascader</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">div</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">div</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">class</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;block&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">style</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;width: 220px; margin-right: 20px&quot;</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">div</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">class</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;mt-5&quot;</span><span style="color: #6E6A86">&gt;</span><span style="color: #E0DEF4">{{ selected }}</span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">div</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">div</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">div</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">template</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">script</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">setup</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">lang</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;ts&quot;</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #3E8FB0">import </span><span style="color: #908CAA">{</span><span style="color: #3E8FB0"> </span><span style="color: #E0DEF4; font-style: italic">ref</span><span style="color: #3E8FB0"> </span><span style="color: #908CAA">}</span><span style="color: #3E8FB0"> from </span><span style="color: #F6C177">&#39;vue&#39;</span></span>
<span class="line"></span>
<span class="line"><span style="color: #3E8FB0">let</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">id</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">=</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">0</span></span>
<span class="line"></span>
<span class="line"><span style="color: #3E8FB0">const</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">selected</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">=</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">ref</span><span style="color: #E0DEF4">([])</span></span>
<span class="line"><span style="color: #3E8FB0">const</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">props</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">=</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">  lazy</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">true</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #EA9A97">lazyLoad</span><span style="color: #908CAA">(</span><span style="color: #C4A7E7; font-style: italic">node</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">resolve</span><span style="color: #908CAA">)</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #3E8FB0">const</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">level</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">}</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">=</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">node</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #EA9A97">setTimeout</span><span style="color: #E0DEF4">(</span><span style="color: #908CAA">()</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">=&gt;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #3E8FB0">const</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">nodes</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">=</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">Array</span><span style="color: #3E8FB0">.</span><span style="color: #EA9A97">from</span><span style="color: #E0DEF4">(</span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> length</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">level</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">+</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">1</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">}</span><span style="color: #E0DEF4">)</span><span style="color: #3E8FB0">.</span><span style="color: #EA9A97">map</span><span style="color: #E0DEF4">(</span><span style="color: #908CAA">()</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">=&gt;</span><span style="color: #E0DEF4"> (</span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">        value</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">++</span><span style="color: #E0DEF4; font-style: italic">id</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">        label</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">`选项</span><span style="color: #908CAA">${</span><span style="color: #E0DEF4; font-style: italic">id</span><span style="color: #908CAA">}</span><span style="color: #F6C177">`</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">        leaf</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">level</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">&gt;=</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">2</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">}</span><span style="color: #E0DEF4">))</span></span>
<span class="line"><span style="color: #908CAA">      </span><span style="color: #908CAA; font-style: italic">//</span><span style="color: #6E6A86; font-style: italic"> 通过调用resolve将子节点数据返回，通知组件数据加载完成</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #EA9A97">resolve</span><span style="color: #E0DEF4">(</span><span style="color: #E0DEF4; font-style: italic">nodes</span><span style="color: #E0DEF4">)</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #908CAA">},</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">1000</span><span style="color: #E0DEF4">)</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">}</span></span>
<span class="line"><span style="color: #908CAA">}</span></span>
<span class="line"><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">script</span><span style="color: #6E6A86">&gt;</span></span></code></pre><pre v-pre class="shiki slack-ochin vp-code-light" ><code><span class="line"><span style="color: #002339">&lt;</span><span style="color: #0444AC">template</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">  &lt;</span><span style="color: #0444AC">div</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">flex</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">    &lt;</span><span style="color: #0444AC">div</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">class</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;block&quot;</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">style</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;width: 220px; margin-right: 20px&quot;</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">      &lt;</span><span style="color: #0444AC">b-cascader</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">v-model</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;selected&quot;</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">:props</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;props&quot;</span><span style="color: #002339">&gt;&lt;/</span><span style="color: #0444AC">b-cascader</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">    &lt;/</span><span style="color: #0444AC">div</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">    &lt;</span><span style="color: #0444AC">div</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">class</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;block&quot;</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">style</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;width: 220px; margin-right: 20px&quot;</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">      &lt;</span><span style="color: #0444AC">div</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">class</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;mt-5&quot;</span><span style="color: #002339">&gt;{{ selected }}&lt;/</span><span style="color: #0444AC">div</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">    &lt;/</span><span style="color: #0444AC">div</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">  &lt;/</span><span style="color: #0444AC">div</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">&lt;/</span><span style="color: #0444AC">template</span><span style="color: #002339">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color: #002339">&lt;</span><span style="color: #0444AC">script</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">setup</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">lang</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;ts&quot;</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #7B30D0">import</span><span style="color: #002339"> { </span><span style="color: #2F86D2">ref</span><span style="color: #002339"> } </span><span style="color: #7B30D0">from</span><span style="color: #002339"> </span><span style="color: #A44185">&#39;vue&#39;</span></span>
<span class="line"></span>
<span class="line"><span style="color: #0991B6">let</span><span style="color: #002339"> </span><span style="color: #2F86D2">id</span><span style="color: #002339"> </span><span style="color: #7B30D0">=</span><span style="color: #002339"> </span><span style="color: #174781">0</span></span>
<span class="line"></span>
<span class="line"><span style="color: #0991B6">const</span><span style="color: #002339"> </span><span style="color: #2F86D2">selected</span><span style="color: #002339"> </span><span style="color: #7B30D0">=</span><span style="color: #002339"> </span><span style="color: #7EB233">ref</span><span style="color: #002339">([])</span></span>
<span class="line"><span style="color: #0991B6">const</span><span style="color: #002339"> </span><span style="color: #2F86D2">props</span><span style="color: #002339"> </span><span style="color: #7B30D0">=</span><span style="color: #002339"> {</span></span>
<span class="line"><span style="color: #002339">  lazy: </span><span style="color: #174781">true</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">  </span><span style="color: #7EB233">lazyLoad</span><span style="color: #002339">(</span><span style="color: #B1108E">node</span><span style="color: #002339">, </span><span style="color: #B1108E">resolve</span><span style="color: #002339">) {</span></span>
<span class="line"><span style="color: #002339">    </span><span style="color: #0991B6">const</span><span style="color: #002339"> { </span><span style="color: #2F86D2">level</span><span style="color: #002339"> } </span><span style="color: #7B30D0">=</span><span style="color: #002339"> </span><span style="color: #2F86D2">node</span></span>
<span class="line"><span style="color: #002339">    </span><span style="color: #7EB233">setTimeout</span><span style="color: #002339">(() </span><span style="color: #0991B6">=&gt;</span><span style="color: #002339"> {</span></span>
<span class="line"><span style="color: #002339">      </span><span style="color: #0991B6">const</span><span style="color: #002339"> </span><span style="color: #2F86D2">nodes</span><span style="color: #002339"> </span><span style="color: #7B30D0">=</span><span style="color: #002339"> </span><span style="color: #2F86D2">Array</span><span style="color: #002339">.</span><span style="color: #7EB233">from</span><span style="color: #002339">({ length: </span><span style="color: #2F86D2">level</span><span style="color: #002339"> </span><span style="color: #7B30D0">+</span><span style="color: #002339"> </span><span style="color: #174781">1</span><span style="color: #002339"> }).</span><span style="color: #7EB233">map</span><span style="color: #002339">(() </span><span style="color: #0991B6">=&gt;</span><span style="color: #002339"> ({</span></span>
<span class="line"><span style="color: #002339">        value: </span><span style="color: #7B30D0">++</span><span style="color: #2F86D2">id</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">        label: </span><span style="color: #A44185">`选项${</span><span style="color: #2F86D2">id</span><span style="color: #A44185">}`</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">        leaf: </span><span style="color: #2F86D2">level</span><span style="color: #002339"> </span><span style="color: #7B30D0">&gt;=</span><span style="color: #002339"> </span><span style="color: #174781">2</span></span>
<span class="line"><span style="color: #002339">      }))</span></span>
<span class="line"><span style="color: #002339">      </span><span style="color: #357B42; font-style: italic">// 通过调用resolve将子节点数据返回，通知组件数据加载完成</span></span>
<span class="line"><span style="color: #002339">      </span><span style="color: #7EB233">resolve</span><span style="color: #002339">(</span><span style="color: #2F86D2">nodes</span><span style="color: #002339">)</span></span>
<span class="line"><span style="color: #002339">    }, </span><span style="color: #174781">1000</span><span style="color: #002339">)</span></span>
<span class="line"><span style="color: #002339">  }</span></span>
<span class="line"><span style="color: #002339">}</span></span>
<span class="line"><span style="color: #002339">&lt;/</span><span style="color: #0444AC">script</span><span style="color: #002339">&gt;</span></span></code></pre></div></section></div><h2 id="可搜索" tabindex="-1">可搜索 <a class="header-anchor" href="#可搜索" aria-label="Permalink to &quot;可搜索&quot;">​</a></h2><p>可以快捷地搜索选项并选择,将filterable赋值为true即可打开搜索功能，默认会匹配节点的label或所有父节点的label(由show-all-levels决定)中包含输入值的选项。</p><p>你也可以用filter-method自定义搜索逻辑，接受一个函数，第一个参数是节点node，第二个参数是搜索关键词keyword，通过返回布尔值表示是否匹配</p><div class="vitepress-demo-preview__element-plus__container" suffixname="vue" absolutepath="D:\Workspace\MyProject\bin-ui-design\demo\components\demo\Cascader\Search.vue" relativepath="./demo/Cascader/Search.vue"><section class="vitepress-demo-preview-preview"><!--[--><div flex><div class="block" style="width:220px;margin-right:20px;"><span class="demonstration">单选可搜索</span><!--[--><div class="bin-cascader" aria-describedby="bin-popper-3412" style=""><div class="bin-input-wrapper bin-input-type-text"><!--[--><!----><input autocomplete="off" type="text" class="bin-input bin-input-with-suffix" placeholder="试试搜索：鼓楼" value="" number="false"><!----><span class="bin-input-suffix"><!----><!----><!----><!--[--><i class="b-iconfont b-icon-down"></i><!--]--><!----></span><!----><!----><!----><!--]--></div><!----></div><!--teleport start--><!--teleport end--><!--]--><div class="mt-5">[]</div></div><div class="block" style="width:220px;margin-right:20px;"><span class="demonstration">多选可搜索</span><!--[--><div class="bin-cascader" aria-describedby="bin-popper-1545" style=""><div class="bin-input-wrapper bin-input-type-text"><!--[--><!----><input autocomplete="off" type="text" class="bin-input bin-input-with-suffix" placeholder="试试搜索：鼓楼" readonly value="" number="false"><!----><span class="bin-input-suffix"><!----><!----><!----><!--[--><i class="b-iconfont b-icon-down"></i><!--]--><!----></span><!----><!----><!----><!--]--></div><div class="bin-cascader__tags"><!--[--><!--]--><input type="text" class="bin-cascader__search-input" placeholder="试试搜索：鼓楼" value></div></div><!--teleport start--><!--teleport end--><!--]--><div class="mt-5">[]</div></div></div><!--]--></section><section class="vitepress-demo-preview-description"><div class="vitepress-demo-preview-description__split-line"></div><div class="vitepress-demo-preview-description__handle-btn"><svg t="1661231422733" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3259" width="20" height="20"><path d="M682.666667 810.666667c-12.8 0-21.333333-4.266667-29.866667-12.8-17.066667-17.066667-17.066667-42.666667 0-59.733334l226.133333-226.133333-226.133333-226.133333c-17.066667-17.066667-17.066667-42.666667 0-59.733334s42.666667-17.066667 59.733333 0l256 256c17.066667 17.066667 17.066667 42.666667 0 59.733334l-256 256c-8.533333 8.533333-17.066667 12.8-29.866666 12.8zM341.333333 810.666667c-12.8 0-21.333333-4.266667-29.866666-12.8l-256-256c-17.066667-17.066667-17.066667-42.666667 0-59.733334l256-256c17.066667-17.066667 42.666667-17.066667 59.733333 0s17.066667 42.666667 0 59.733334L145.066667 512l226.133333 226.133333c17.066667 17.066667 17.066667 42.666667 0 59.733334-8.533333 8.533333-17.066667 12.8-29.866667 12.8z" p-id="3260"></path></svg><svg viewBox="0 0 544 560" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M399.503 143.667C399.319 152.501 406.332 159.812 415.167 159.997C424.001 160.181 431.312 153.168 431.497 144.333L399.503 143.667ZM416 120L431.997 120.333C431.999 120.207 432 120.081 432 119.954L416 120ZM360 64L360.046 48.0001C360.03 48 360.015 48 360 48L360 64ZM144 64V48C143.984 48 143.968 48 143.953 48.0001L144 64ZM80 128L64.0001 127.953C64 127.968 64 127.984 64 128L80 128ZM80 344H64C64 344.015 64 344.03 64.0001 344.046L80 344ZM136 400L135.954 416C135.97 416 135.985 416 136 416L136 400ZM160 416C168.837 416 176 408.837 176 400C176 391.163 168.837 384 160 384V416ZM217 160H439V128H217V160ZM439 160C461.644 160 480 178.356 480 201H512C512 160.683 479.317 128 439 128V160ZM480 201V423H512V201H480ZM480 423C480 445.644 461.644 464 439 464V496C479.317 496 512 463.317 512 423H480ZM439 464H217V496H439V464ZM217 464C194.356 464 176 445.644 176 423H144C144 463.317 176.683 496 217 496V464ZM176 423V201H144V423H176ZM176 201C176 178.356 194.356 160 217 160V128C176.683 128 144 160.683 144 201H176ZM431.497 144.333L431.997 120.333L400.003 119.667L399.503 143.667L431.497 144.333ZM432 119.954C431.946 100.888 424.347 82.6173 410.865 69.1349L388.238 91.7624C395.741 99.2658 399.97 109.434 400 120.046L432 119.954ZM410.865 69.1349C397.383 55.6526 379.112 48.0543 360.046 48.0001L359.954 79.9999C370.566 80.0301 380.734 84.2589 388.238 91.7624L410.865 69.1349ZM360 48H144V80H360V48ZM143.953 48.0001C122.767 48.0627 102.467 56.5064 87.4868 71.4868L110.114 94.1142C119.117 85.1118 131.316 80.0376 144.047 79.9999L143.953 48.0001ZM87.4868 71.4868C72.5064 86.4673 64.0627 106.767 64.0001 127.953L95.9999 128.047C96.0376 115.316 101.112 103.117 110.114 94.1142L87.4868 71.4868ZM64 128V344H96V128H64ZM64.0001 344.046C64.0543 363.112 71.6526 381.383 85.1349 394.865L107.762 372.238C100.259 364.734 96.0301 354.566 95.9999 343.954L64.0001 344.046ZM85.1349 394.865C98.6173 408.347 116.888 415.946 135.954 416L136.046 384C125.434 383.97 115.266 379.741 107.762 372.238L85.1349 394.865ZM136 416H160V384H136V416Z" fill="currentColor"></path></svg></div></section><section class="vitepress-demo-preview-source"><div class="language-vue"><pre v-pre class="shiki rose-pine-moon vp-code-dark" ><code><span class="line"><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">template</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">div</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">flex</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">div</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">class</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;block&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">style</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;width: 220px; margin-right: 20px&quot;</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">span</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">class</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;demonstration&quot;</span><span style="color: #6E6A86">&gt;</span><span style="color: #E0DEF4">单选可搜索</span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">span</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-cascader</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #C4A7E7; font-style: italic">v-model</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;selected1&quot;</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #C4A7E7; font-style: italic">placeholder</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;试试搜索：鼓楼&quot;</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #C4A7E7; font-style: italic">:options</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;options&quot;</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #C4A7E7; font-style: italic">filterable</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #6E6A86">&gt;&lt;/</span><span style="color: #9CCFD8">b-cascader</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">div</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">class</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;mt-5&quot;</span><span style="color: #6E6A86">&gt;</span><span style="color: #E0DEF4">{{ selected1 }}</span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">div</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">div</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">div</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">class</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;block&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">style</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;width: 220px; margin-right: 20px&quot;</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">span</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">class</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;demonstration&quot;</span><span style="color: #6E6A86">&gt;</span><span style="color: #E0DEF4">多选可搜索</span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">span</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-cascader</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #C4A7E7; font-style: italic">v-model</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;selected2&quot;</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #C4A7E7; font-style: italic">placeholder</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;试试搜索：鼓楼&quot;</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #C4A7E7; font-style: italic">:options</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;options&quot;</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #C4A7E7; font-style: italic">:props</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;{ multiple: true }&quot;</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #C4A7E7; font-style: italic">collapse-tags</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #C4A7E7; font-style: italic">filterable</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #C4A7E7; font-style: italic">:filter-method</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;filterMethod&quot;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #6E6A86">&gt;&lt;/</span><span style="color: #9CCFD8">b-cascader</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">div</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">class</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;mt-5&quot;</span><span style="color: #6E6A86">&gt;</span><span style="color: #E0DEF4">{{ selected2 }}</span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">div</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">div</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">div</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">template</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">script</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">setup</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">lang</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;ts&quot;</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #3E8FB0">import </span><span style="color: #908CAA">{</span><span style="color: #3E8FB0"> </span><span style="color: #E0DEF4; font-style: italic">ref</span><span style="color: #3E8FB0"> </span><span style="color: #908CAA">}</span><span style="color: #3E8FB0"> from </span><span style="color: #F6C177">&#39;vue&#39;</span></span>
<span class="line"></span>
<span class="line"><span style="color: #3E8FB0">const</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">options</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">=</span><span style="color: #E0DEF4"> [</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">    value</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;nanjing&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    label</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;南京&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    children</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> [</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">        value</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;xuanwu&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">        label</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;玄武区&#39;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">        value</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;gulou&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">        label</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;鼓楼区&#39;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">        value</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;jianye&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">        label</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;建邺区&#39;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">}</span></span>
<span class="line"><span style="color: #E0DEF4">    ]</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">    value</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;xuzhou&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    label</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;徐州&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    children</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> [</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">        value</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;tongshan&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">        label</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;铜山区&#39;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">        value</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;gulou&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">        label</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;鼓楼区&#39;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">        value</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;yunlong&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">        label</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;云龙区&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">        children</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> [</span></span>
<span class="line"><span style="color: #E0DEF4">          </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> value</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;dalonghu&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> label</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;大龙湖街道&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">          </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> value</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;guozhuanglu&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> label</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;郭庄路街道&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">          </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> value</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;lvdi&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> label</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;绿地商务城&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">          </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> value</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;jinlonghu&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> label</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;金龙湖街道&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">}</span></span>
<span class="line"><span style="color: #E0DEF4">        ]</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">        value</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;jiawang&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">        label</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;贾汪区&#39;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> value</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;peixian&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> label</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;沛县&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> value</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;fengxian&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> label</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;丰县&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> value</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;pizhou&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> label</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;邳州市&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> value</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;xinyi&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> label</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;新沂市&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">}</span></span>
<span class="line"><span style="color: #E0DEF4">    ]</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">}</span></span>
<span class="line"><span style="color: #E0DEF4">]</span></span>
<span class="line"><span style="color: #3E8FB0">const</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">selected1</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">=</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">ref</span><span style="color: #E0DEF4">([])</span></span>
<span class="line"><span style="color: #3E8FB0">const</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">selected2</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">=</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">ref</span><span style="color: #E0DEF4">([])</span></span>
<span class="line"></span>
<span class="line"><span style="color: #3E8FB0">function</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">filterMethod</span><span style="color: #908CAA">(</span><span style="color: #C4A7E7; font-style: italic">node</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">keyword</span><span style="color: #908CAA">)</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #3E8FB0">return</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">node</span><span style="color: #3E8FB0">.</span><span style="color: #E0DEF4; font-style: italic">label</span><span style="color: #3E8FB0">.</span><span style="color: #EA9A97">includes</span><span style="color: #E0DEF4">(</span><span style="color: #E0DEF4; font-style: italic">keyword</span><span style="color: #E0DEF4">) </span><span style="color: #3E8FB0">&amp;&amp;</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">node</span><span style="color: #3E8FB0">.</span><span style="color: #E0DEF4; font-style: italic">parent</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">&amp;&amp;</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">node</span><span style="color: #3E8FB0">.</span><span style="color: #E0DEF4; font-style: italic">parent</span><span style="color: #3E8FB0">.</span><span style="color: #E0DEF4; font-style: italic">label</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">===</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;徐州&#39;</span></span>
<span class="line"><span style="color: #908CAA">}</span></span>
<span class="line"><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">script</span><span style="color: #6E6A86">&gt;</span></span></code></pre><pre v-pre class="shiki slack-ochin vp-code-light" ><code><span class="line"><span style="color: #002339">&lt;</span><span style="color: #0444AC">template</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">  &lt;</span><span style="color: #0444AC">div</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">flex</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">    &lt;</span><span style="color: #0444AC">div</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">class</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;block&quot;</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">style</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;width: 220px; margin-right: 20px&quot;</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">      &lt;</span><span style="color: #0444AC">span</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">class</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;demonstration&quot;</span><span style="color: #002339">&gt;单选可搜索&lt;/</span><span style="color: #0444AC">span</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">      &lt;</span><span style="color: #0444AC">b-cascader</span></span>
<span class="line"><span style="color: #002339">        </span><span style="color: #DF8618; font-style: italic">v-model</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;selected1&quot;</span></span>
<span class="line"><span style="color: #002339">        </span><span style="color: #DF8618; font-style: italic">placeholder</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;试试搜索：鼓楼&quot;</span></span>
<span class="line"><span style="color: #002339">        </span><span style="color: #DF8618; font-style: italic">:options</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;options&quot;</span></span>
<span class="line"><span style="color: #002339">        </span><span style="color: #DF8618; font-style: italic">filterable</span></span>
<span class="line"><span style="color: #002339">      &gt;&lt;/</span><span style="color: #0444AC">b-cascader</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">      &lt;</span><span style="color: #0444AC">div</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">class</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;mt-5&quot;</span><span style="color: #002339">&gt;{{ selected1 }}&lt;/</span><span style="color: #0444AC">div</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">    &lt;/</span><span style="color: #0444AC">div</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">    &lt;</span><span style="color: #0444AC">div</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">class</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;block&quot;</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">style</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;width: 220px; margin-right: 20px&quot;</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">      &lt;</span><span style="color: #0444AC">span</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">class</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;demonstration&quot;</span><span style="color: #002339">&gt;多选可搜索&lt;/</span><span style="color: #0444AC">span</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">      &lt;</span><span style="color: #0444AC">b-cascader</span></span>
<span class="line"><span style="color: #002339">        </span><span style="color: #DF8618; font-style: italic">v-model</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;selected2&quot;</span></span>
<span class="line"><span style="color: #002339">        </span><span style="color: #DF8618; font-style: italic">placeholder</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;试试搜索：鼓楼&quot;</span></span>
<span class="line"><span style="color: #002339">        </span><span style="color: #DF8618; font-style: italic">:options</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;options&quot;</span></span>
<span class="line"><span style="color: #002339">        </span><span style="color: #DF8618; font-style: italic">:props</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;{ multiple: true }&quot;</span></span>
<span class="line"><span style="color: #002339">        </span><span style="color: #DF8618; font-style: italic">collapse-tags</span></span>
<span class="line"><span style="color: #002339">        </span><span style="color: #DF8618; font-style: italic">filterable</span></span>
<span class="line"><span style="color: #002339">        </span><span style="color: #DF8618; font-style: italic">:filter-method</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;filterMethod&quot;</span></span>
<span class="line"><span style="color: #002339">      &gt;&lt;/</span><span style="color: #0444AC">b-cascader</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">      &lt;</span><span style="color: #0444AC">div</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">class</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;mt-5&quot;</span><span style="color: #002339">&gt;{{ selected2 }}&lt;/</span><span style="color: #0444AC">div</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">    &lt;/</span><span style="color: #0444AC">div</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">  &lt;/</span><span style="color: #0444AC">div</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">&lt;/</span><span style="color: #0444AC">template</span><span style="color: #002339">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color: #002339">&lt;</span><span style="color: #0444AC">script</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">setup</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">lang</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;ts&quot;</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #7B30D0">import</span><span style="color: #002339"> { </span><span style="color: #2F86D2">ref</span><span style="color: #002339"> } </span><span style="color: #7B30D0">from</span><span style="color: #002339"> </span><span style="color: #A44185">&#39;vue&#39;</span></span>
<span class="line"></span>
<span class="line"><span style="color: #0991B6">const</span><span style="color: #002339"> </span><span style="color: #2F86D2">options</span><span style="color: #002339"> </span><span style="color: #7B30D0">=</span><span style="color: #002339"> [</span></span>
<span class="line"><span style="color: #002339">  {</span></span>
<span class="line"><span style="color: #002339">    value: </span><span style="color: #A44185">&#39;nanjing&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    label: </span><span style="color: #A44185">&#39;南京&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    children: [</span></span>
<span class="line"><span style="color: #002339">      {</span></span>
<span class="line"><span style="color: #002339">        value: </span><span style="color: #A44185">&#39;xuanwu&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">        label: </span><span style="color: #A44185">&#39;玄武区&#39;</span></span>
<span class="line"><span style="color: #002339">      },</span></span>
<span class="line"><span style="color: #002339">      {</span></span>
<span class="line"><span style="color: #002339">        value: </span><span style="color: #A44185">&#39;gulou&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">        label: </span><span style="color: #A44185">&#39;鼓楼区&#39;</span></span>
<span class="line"><span style="color: #002339">      },</span></span>
<span class="line"><span style="color: #002339">      {</span></span>
<span class="line"><span style="color: #002339">        value: </span><span style="color: #A44185">&#39;jianye&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">        label: </span><span style="color: #A44185">&#39;建邺区&#39;</span></span>
<span class="line"><span style="color: #002339">      }</span></span>
<span class="line"><span style="color: #002339">    ]</span></span>
<span class="line"><span style="color: #002339">  },</span></span>
<span class="line"><span style="color: #002339">  {</span></span>
<span class="line"><span style="color: #002339">    value: </span><span style="color: #A44185">&#39;xuzhou&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    label: </span><span style="color: #A44185">&#39;徐州&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    children: [</span></span>
<span class="line"><span style="color: #002339">      {</span></span>
<span class="line"><span style="color: #002339">        value: </span><span style="color: #A44185">&#39;tongshan&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">        label: </span><span style="color: #A44185">&#39;铜山区&#39;</span></span>
<span class="line"><span style="color: #002339">      },</span></span>
<span class="line"><span style="color: #002339">      {</span></span>
<span class="line"><span style="color: #002339">        value: </span><span style="color: #A44185">&#39;gulou&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">        label: </span><span style="color: #A44185">&#39;鼓楼区&#39;</span></span>
<span class="line"><span style="color: #002339">      },</span></span>
<span class="line"><span style="color: #002339">      {</span></span>
<span class="line"><span style="color: #002339">        value: </span><span style="color: #A44185">&#39;yunlong&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">        label: </span><span style="color: #A44185">&#39;云龙区&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">        children: [</span></span>
<span class="line"><span style="color: #002339">          { value: </span><span style="color: #A44185">&#39;dalonghu&#39;</span><span style="color: #002339">, label: </span><span style="color: #A44185">&#39;大龙湖街道&#39;</span><span style="color: #002339"> },</span></span>
<span class="line"><span style="color: #002339">          { value: </span><span style="color: #A44185">&#39;guozhuanglu&#39;</span><span style="color: #002339">, label: </span><span style="color: #A44185">&#39;郭庄路街道&#39;</span><span style="color: #002339"> },</span></span>
<span class="line"><span style="color: #002339">          { value: </span><span style="color: #A44185">&#39;lvdi&#39;</span><span style="color: #002339">, label: </span><span style="color: #A44185">&#39;绿地商务城&#39;</span><span style="color: #002339"> },</span></span>
<span class="line"><span style="color: #002339">          { value: </span><span style="color: #A44185">&#39;jinlonghu&#39;</span><span style="color: #002339">, label: </span><span style="color: #A44185">&#39;金龙湖街道&#39;</span><span style="color: #002339"> }</span></span>
<span class="line"><span style="color: #002339">        ]</span></span>
<span class="line"><span style="color: #002339">      },</span></span>
<span class="line"><span style="color: #002339">      {</span></span>
<span class="line"><span style="color: #002339">        value: </span><span style="color: #A44185">&#39;jiawang&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">        label: </span><span style="color: #A44185">&#39;贾汪区&#39;</span></span>
<span class="line"><span style="color: #002339">      },</span></span>
<span class="line"><span style="color: #002339">      { value: </span><span style="color: #A44185">&#39;peixian&#39;</span><span style="color: #002339">, label: </span><span style="color: #A44185">&#39;沛县&#39;</span><span style="color: #002339"> },</span></span>
<span class="line"><span style="color: #002339">      { value: </span><span style="color: #A44185">&#39;fengxian&#39;</span><span style="color: #002339">, label: </span><span style="color: #A44185">&#39;丰县&#39;</span><span style="color: #002339"> },</span></span>
<span class="line"><span style="color: #002339">      { value: </span><span style="color: #A44185">&#39;pizhou&#39;</span><span style="color: #002339">, label: </span><span style="color: #A44185">&#39;邳州市&#39;</span><span style="color: #002339"> },</span></span>
<span class="line"><span style="color: #002339">      { value: </span><span style="color: #A44185">&#39;xinyi&#39;</span><span style="color: #002339">, label: </span><span style="color: #A44185">&#39;新沂市&#39;</span><span style="color: #002339"> }</span></span>
<span class="line"><span style="color: #002339">    ]</span></span>
<span class="line"><span style="color: #002339">  }</span></span>
<span class="line"><span style="color: #002339">]</span></span>
<span class="line"><span style="color: #0991B6">const</span><span style="color: #002339"> </span><span style="color: #2F86D2">selected1</span><span style="color: #002339"> </span><span style="color: #7B30D0">=</span><span style="color: #002339"> </span><span style="color: #7EB233">ref</span><span style="color: #002339">([])</span></span>
<span class="line"><span style="color: #0991B6">const</span><span style="color: #002339"> </span><span style="color: #2F86D2">selected2</span><span style="color: #002339"> </span><span style="color: #7B30D0">=</span><span style="color: #002339"> </span><span style="color: #7EB233">ref</span><span style="color: #002339">([])</span></span>
<span class="line"></span>
<span class="line"><span style="color: #0991B6">function</span><span style="color: #002339"> </span><span style="color: #7EB233">filterMethod</span><span style="color: #002339">(</span><span style="color: #B1108E">node</span><span style="color: #002339">, </span><span style="color: #B1108E">keyword</span><span style="color: #002339">) {</span></span>
<span class="line"><span style="color: #002339">  </span><span style="color: #7B30D0">return</span><span style="color: #002339"> </span><span style="color: #2F86D2">node</span><span style="color: #002339">.</span><span style="color: #2F86D2">label</span><span style="color: #002339">.</span><span style="color: #7EB233">includes</span><span style="color: #002339">(</span><span style="color: #2F86D2">keyword</span><span style="color: #002339">) </span><span style="color: #7B30D0">&amp;&amp;</span><span style="color: #002339"> </span><span style="color: #2F86D2">node</span><span style="color: #002339">.</span><span style="color: #2F86D2">parent</span><span style="color: #002339"> </span><span style="color: #7B30D0">&amp;&amp;</span><span style="color: #002339"> </span><span style="color: #2F86D2">node</span><span style="color: #002339">.</span><span style="color: #2F86D2">parent</span><span style="color: #002339">.</span><span style="color: #2F86D2">label</span><span style="color: #002339"> </span><span style="color: #7B30D0">===</span><span style="color: #002339"> </span><span style="color: #A44185">&#39;徐州&#39;</span></span>
<span class="line"><span style="color: #002339">}</span></span>
<span class="line"><span style="color: #002339">&lt;/</span><span style="color: #0444AC">script</span><span style="color: #002339">&gt;</span></span></code></pre></div></section></div><h2 id="自定义选项" tabindex="-1">自定义选项 <a class="header-anchor" href="#自定义选项" aria-label="Permalink to &quot;自定义选项&quot;">​</a></h2><p>可以自定义选项的内容 , scoped slot会传入两个字段 node 和 data，分别表示当前节点的 Node 对象和数据。</p><div class="vitepress-demo-preview__element-plus__container" suffixname="vue" absolutepath="D:\Workspace\MyProject\bin-ui-design\demo\components\demo\Cascader\Custom.vue" relativepath="./demo/Cascader/Custom.vue"><section class="vitepress-demo-preview-preview"><!--[--><div flex><div class="block" style="width:220px;margin-right:20px;"><!--[--><div class="bin-cascader" aria-describedby="bin-popper-4966" style=""><div class="bin-input-wrapper bin-input-type-text"><!--[--><!----><input autocomplete="off" type="text" class="bin-input bin-input-with-suffix" placeholder="" readonly value="" number="false"><!----><span class="bin-input-suffix"><!----><!----><!----><!--[--><i class="b-iconfont b-icon-down"></i><!--]--><!----></span><!----><!----><!----><!--]--></div><!----></div><!--teleport start--><!--teleport end--><!--]--></div><div class="block" style="width:220px;margin-right:20px;"><div class="mt-5">[]</div></div></div><!--]--></section><section class="vitepress-demo-preview-description"><div class="vitepress-demo-preview-description__split-line"></div><div class="vitepress-demo-preview-description__handle-btn"><svg t="1661231422733" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3259" width="20" height="20"><path d="M682.666667 810.666667c-12.8 0-21.333333-4.266667-29.866667-12.8-17.066667-17.066667-17.066667-42.666667 0-59.733334l226.133333-226.133333-226.133333-226.133333c-17.066667-17.066667-17.066667-42.666667 0-59.733334s42.666667-17.066667 59.733333 0l256 256c17.066667 17.066667 17.066667 42.666667 0 59.733334l-256 256c-8.533333 8.533333-17.066667 12.8-29.866666 12.8zM341.333333 810.666667c-12.8 0-21.333333-4.266667-29.866666-12.8l-256-256c-17.066667-17.066667-17.066667-42.666667 0-59.733334l256-256c17.066667-17.066667 42.666667-17.066667 59.733333 0s17.066667 42.666667 0 59.733334L145.066667 512l226.133333 226.133333c17.066667 17.066667 17.066667 42.666667 0 59.733334-8.533333 8.533333-17.066667 12.8-29.866667 12.8z" p-id="3260"></path></svg><svg viewBox="0 0 544 560" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M399.503 143.667C399.319 152.501 406.332 159.812 415.167 159.997C424.001 160.181 431.312 153.168 431.497 144.333L399.503 143.667ZM416 120L431.997 120.333C431.999 120.207 432 120.081 432 119.954L416 120ZM360 64L360.046 48.0001C360.03 48 360.015 48 360 48L360 64ZM144 64V48C143.984 48 143.968 48 143.953 48.0001L144 64ZM80 128L64.0001 127.953C64 127.968 64 127.984 64 128L80 128ZM80 344H64C64 344.015 64 344.03 64.0001 344.046L80 344ZM136 400L135.954 416C135.97 416 135.985 416 136 416L136 400ZM160 416C168.837 416 176 408.837 176 400C176 391.163 168.837 384 160 384V416ZM217 160H439V128H217V160ZM439 160C461.644 160 480 178.356 480 201H512C512 160.683 479.317 128 439 128V160ZM480 201V423H512V201H480ZM480 423C480 445.644 461.644 464 439 464V496C479.317 496 512 463.317 512 423H480ZM439 464H217V496H439V464ZM217 464C194.356 464 176 445.644 176 423H144C144 463.317 176.683 496 217 496V464ZM176 423V201H144V423H176ZM176 201C176 178.356 194.356 160 217 160V128C176.683 128 144 160.683 144 201H176ZM431.497 144.333L431.997 120.333L400.003 119.667L399.503 143.667L431.497 144.333ZM432 119.954C431.946 100.888 424.347 82.6173 410.865 69.1349L388.238 91.7624C395.741 99.2658 399.97 109.434 400 120.046L432 119.954ZM410.865 69.1349C397.383 55.6526 379.112 48.0543 360.046 48.0001L359.954 79.9999C370.566 80.0301 380.734 84.2589 388.238 91.7624L410.865 69.1349ZM360 48H144V80H360V48ZM143.953 48.0001C122.767 48.0627 102.467 56.5064 87.4868 71.4868L110.114 94.1142C119.117 85.1118 131.316 80.0376 144.047 79.9999L143.953 48.0001ZM87.4868 71.4868C72.5064 86.4673 64.0627 106.767 64.0001 127.953L95.9999 128.047C96.0376 115.316 101.112 103.117 110.114 94.1142L87.4868 71.4868ZM64 128V344H96V128H64ZM64.0001 344.046C64.0543 363.112 71.6526 381.383 85.1349 394.865L107.762 372.238C100.259 364.734 96.0301 354.566 95.9999 343.954L64.0001 344.046ZM85.1349 394.865C98.6173 408.347 116.888 415.946 135.954 416L136.046 384C125.434 383.97 115.266 379.741 107.762 372.238L85.1349 394.865ZM136 416H160V384H136V416Z" fill="currentColor"></path></svg></div></section><section class="vitepress-demo-preview-source"><div class="language-vue"><pre v-pre class="shiki rose-pine-moon vp-code-dark" ><code><span class="line"><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">template</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">div</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">flex</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">div</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">class</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;block&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">style</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;width: 220px; margin-right: 20px&quot;</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-cascader</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">:options</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;options&quot;</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">template</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">#</span><span style="color: #C4A7E7; font-style: italic">default</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;</span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">node</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">data</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">}</span><span style="color: #F6C177">&quot;</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">          </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">span</span><span style="color: #6E6A86">&gt;</span><span style="color: #E0DEF4">{{ data.label }}</span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">span</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">          </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">span</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">v-if</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;!node.isLeaf&quot;</span><span style="color: #6E6A86">&gt;</span><span style="color: #E0DEF4">({{ data.children.length }})</span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">span</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">template</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">b-cascader</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">div</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">div</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">class</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;block&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">style</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;width: 220px; margin-right: 20px&quot;</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">div</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">class</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;mt-5&quot;</span><span style="color: #6E6A86">&gt;</span><span style="color: #E0DEF4">{{ selected }}</span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">div</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">div</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">div</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">template</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">script</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">setup</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">lang</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;ts&quot;</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #3E8FB0">import </span><span style="color: #908CAA">{</span><span style="color: #3E8FB0"> </span><span style="color: #E0DEF4; font-style: italic">ref</span><span style="color: #3E8FB0"> </span><span style="color: #908CAA">}</span><span style="color: #3E8FB0"> from </span><span style="color: #F6C177">&#39;vue&#39;</span></span>
<span class="line"></span>
<span class="line"><span style="color: #3E8FB0">const</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">options</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">=</span><span style="color: #E0DEF4"> [</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">    value</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;nanjing&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    label</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;南京&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    children</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> [</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">        value</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;xuanwu&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">        label</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;玄武区&#39;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">        value</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;gulou&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">        label</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;鼓楼区&#39;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">        value</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;jianye&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">        label</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;建邺区&#39;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">}</span></span>
<span class="line"><span style="color: #E0DEF4">    ]</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">    value</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;xuzhou&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    label</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;徐州&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    children</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> [</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">        value</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;tongshan&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">        label</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;铜山区&#39;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">        value</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;gulou&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">        label</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;鼓楼区&#39;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">        value</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;yunlong&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">        label</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;云龙区&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">        children</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> [</span></span>
<span class="line"><span style="color: #E0DEF4">          </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> value</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;dalonghu&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> label</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;大龙湖街道&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">          </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> value</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;guozhuanglu&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> label</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;郭庄路街道&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">          </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> value</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;lvdi&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> label</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;绿地商务城&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">          </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> value</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;jinlonghu&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> label</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;金龙湖街道&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">}</span></span>
<span class="line"><span style="color: #E0DEF4">        ]</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">        value</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;jiawang&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">        label</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;贾汪区&#39;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> value</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;peixian&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> label</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;沛县&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> value</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;fengxian&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> label</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;丰县&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> value</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;pizhou&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> label</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;邳州市&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> value</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;xinyi&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> label</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;新沂市&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">}</span></span>
<span class="line"><span style="color: #E0DEF4">    ]</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">}</span></span>
<span class="line"><span style="color: #E0DEF4">]</span></span>
<span class="line"><span style="color: #3E8FB0">const</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">selected</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">=</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">ref</span><span style="color: #E0DEF4">([])</span></span>
<span class="line"></span>
<span class="line"><span style="color: #3E8FB0">function</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">handleChange</span><span style="color: #908CAA">(</span><span style="color: #C4A7E7; font-style: italic">value</span><span style="color: #908CAA">)</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #E0DEF4; font-style: italic">console</span><span style="color: #3E8FB0">.</span><span style="color: #EA9A97">log</span><span style="color: #E0DEF4">(</span><span style="color: #E0DEF4; font-style: italic">value</span><span style="color: #E0DEF4">)</span></span>
<span class="line"><span style="color: #908CAA">}</span></span>
<span class="line"><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">script</span><span style="color: #6E6A86">&gt;</span></span></code></pre><pre v-pre class="shiki slack-ochin vp-code-light" ><code><span class="line"><span style="color: #002339">&lt;</span><span style="color: #0444AC">template</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">  &lt;</span><span style="color: #0444AC">div</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">flex</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">    &lt;</span><span style="color: #0444AC">div</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">class</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;block&quot;</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">style</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;width: 220px; margin-right: 20px&quot;</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">      &lt;</span><span style="color: #0444AC">b-cascader</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">:options</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;options&quot;</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">        &lt;</span><span style="color: #0444AC">template</span><span style="color: #002339"> #</span><span style="color: #DF8618; font-style: italic">default</span><span style="color: #002339">=</span><span style="color: #002339">&quot;</span><span style="color: #002339">{ </span><span style="color: #2F86D2">node</span><span style="color: #002339">, </span><span style="color: #2F86D2">data</span><span style="color: #002339"> }</span><span style="color: #002339">&quot;</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">          &lt;</span><span style="color: #0444AC">span</span><span style="color: #002339">&gt;{{ data.label }}&lt;/</span><span style="color: #0444AC">span</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">          &lt;</span><span style="color: #0444AC">span</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">v-if</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;!node.isLeaf&quot;</span><span style="color: #002339">&gt;({{ data.children.length }})&lt;/</span><span style="color: #0444AC">span</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">        &lt;/</span><span style="color: #0444AC">template</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">      &lt;/</span><span style="color: #0444AC">b-cascader</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">    &lt;/</span><span style="color: #0444AC">div</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">    &lt;</span><span style="color: #0444AC">div</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">class</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;block&quot;</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">style</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;width: 220px; margin-right: 20px&quot;</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">      &lt;</span><span style="color: #0444AC">div</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">class</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;mt-5&quot;</span><span style="color: #002339">&gt;{{ selected }}&lt;/</span><span style="color: #0444AC">div</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">    &lt;/</span><span style="color: #0444AC">div</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">  &lt;/</span><span style="color: #0444AC">div</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">&lt;/</span><span style="color: #0444AC">template</span><span style="color: #002339">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color: #002339">&lt;</span><span style="color: #0444AC">script</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">setup</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">lang</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;ts&quot;</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #7B30D0">import</span><span style="color: #002339"> { </span><span style="color: #2F86D2">ref</span><span style="color: #002339"> } </span><span style="color: #7B30D0">from</span><span style="color: #002339"> </span><span style="color: #A44185">&#39;vue&#39;</span></span>
<span class="line"></span>
<span class="line"><span style="color: #0991B6">const</span><span style="color: #002339"> </span><span style="color: #2F86D2">options</span><span style="color: #002339"> </span><span style="color: #7B30D0">=</span><span style="color: #002339"> [</span></span>
<span class="line"><span style="color: #002339">  {</span></span>
<span class="line"><span style="color: #002339">    value: </span><span style="color: #A44185">&#39;nanjing&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    label: </span><span style="color: #A44185">&#39;南京&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    children: [</span></span>
<span class="line"><span style="color: #002339">      {</span></span>
<span class="line"><span style="color: #002339">        value: </span><span style="color: #A44185">&#39;xuanwu&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">        label: </span><span style="color: #A44185">&#39;玄武区&#39;</span></span>
<span class="line"><span style="color: #002339">      },</span></span>
<span class="line"><span style="color: #002339">      {</span></span>
<span class="line"><span style="color: #002339">        value: </span><span style="color: #A44185">&#39;gulou&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">        label: </span><span style="color: #A44185">&#39;鼓楼区&#39;</span></span>
<span class="line"><span style="color: #002339">      },</span></span>
<span class="line"><span style="color: #002339">      {</span></span>
<span class="line"><span style="color: #002339">        value: </span><span style="color: #A44185">&#39;jianye&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">        label: </span><span style="color: #A44185">&#39;建邺区&#39;</span></span>
<span class="line"><span style="color: #002339">      }</span></span>
<span class="line"><span style="color: #002339">    ]</span></span>
<span class="line"><span style="color: #002339">  },</span></span>
<span class="line"><span style="color: #002339">  {</span></span>
<span class="line"><span style="color: #002339">    value: </span><span style="color: #A44185">&#39;xuzhou&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    label: </span><span style="color: #A44185">&#39;徐州&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    children: [</span></span>
<span class="line"><span style="color: #002339">      {</span></span>
<span class="line"><span style="color: #002339">        value: </span><span style="color: #A44185">&#39;tongshan&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">        label: </span><span style="color: #A44185">&#39;铜山区&#39;</span></span>
<span class="line"><span style="color: #002339">      },</span></span>
<span class="line"><span style="color: #002339">      {</span></span>
<span class="line"><span style="color: #002339">        value: </span><span style="color: #A44185">&#39;gulou&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">        label: </span><span style="color: #A44185">&#39;鼓楼区&#39;</span></span>
<span class="line"><span style="color: #002339">      },</span></span>
<span class="line"><span style="color: #002339">      {</span></span>
<span class="line"><span style="color: #002339">        value: </span><span style="color: #A44185">&#39;yunlong&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">        label: </span><span style="color: #A44185">&#39;云龙区&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">        children: [</span></span>
<span class="line"><span style="color: #002339">          { value: </span><span style="color: #A44185">&#39;dalonghu&#39;</span><span style="color: #002339">, label: </span><span style="color: #A44185">&#39;大龙湖街道&#39;</span><span style="color: #002339"> },</span></span>
<span class="line"><span style="color: #002339">          { value: </span><span style="color: #A44185">&#39;guozhuanglu&#39;</span><span style="color: #002339">, label: </span><span style="color: #A44185">&#39;郭庄路街道&#39;</span><span style="color: #002339"> },</span></span>
<span class="line"><span style="color: #002339">          { value: </span><span style="color: #A44185">&#39;lvdi&#39;</span><span style="color: #002339">, label: </span><span style="color: #A44185">&#39;绿地商务城&#39;</span><span style="color: #002339"> },</span></span>
<span class="line"><span style="color: #002339">          { value: </span><span style="color: #A44185">&#39;jinlonghu&#39;</span><span style="color: #002339">, label: </span><span style="color: #A44185">&#39;金龙湖街道&#39;</span><span style="color: #002339"> }</span></span>
<span class="line"><span style="color: #002339">        ]</span></span>
<span class="line"><span style="color: #002339">      },</span></span>
<span class="line"><span style="color: #002339">      {</span></span>
<span class="line"><span style="color: #002339">        value: </span><span style="color: #A44185">&#39;jiawang&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">        label: </span><span style="color: #A44185">&#39;贾汪区&#39;</span></span>
<span class="line"><span style="color: #002339">      },</span></span>
<span class="line"><span style="color: #002339">      { value: </span><span style="color: #A44185">&#39;peixian&#39;</span><span style="color: #002339">, label: </span><span style="color: #A44185">&#39;沛县&#39;</span><span style="color: #002339"> },</span></span>
<span class="line"><span style="color: #002339">      { value: </span><span style="color: #A44185">&#39;fengxian&#39;</span><span style="color: #002339">, label: </span><span style="color: #A44185">&#39;丰县&#39;</span><span style="color: #002339"> },</span></span>
<span class="line"><span style="color: #002339">      { value: </span><span style="color: #A44185">&#39;pizhou&#39;</span><span style="color: #002339">, label: </span><span style="color: #A44185">&#39;邳州市&#39;</span><span style="color: #002339"> },</span></span>
<span class="line"><span style="color: #002339">      { value: </span><span style="color: #A44185">&#39;xinyi&#39;</span><span style="color: #002339">, label: </span><span style="color: #A44185">&#39;新沂市&#39;</span><span style="color: #002339"> }</span></span>
<span class="line"><span style="color: #002339">    ]</span></span>
<span class="line"><span style="color: #002339">  }</span></span>
<span class="line"><span style="color: #002339">]</span></span>
<span class="line"><span style="color: #0991B6">const</span><span style="color: #002339"> </span><span style="color: #2F86D2">selected</span><span style="color: #002339"> </span><span style="color: #7B30D0">=</span><span style="color: #002339"> </span><span style="color: #7EB233">ref</span><span style="color: #002339">([])</span></span>
<span class="line"></span>
<span class="line"><span style="color: #0991B6">function</span><span style="color: #002339"> </span><span style="color: #7EB233">handleChange</span><span style="color: #002339">(</span><span style="color: #B1108E">value</span><span style="color: #002339">) {</span></span>
<span class="line"><span style="color: #002339">  </span><span style="color: #2F86D2">console</span><span style="color: #002339">.</span><span style="color: #7EB233">log</span><span style="color: #002339">(</span><span style="color: #2F86D2">value</span><span style="color: #002339">)</span></span>
<span class="line"><span style="color: #002339">}</span></span>
<span class="line"><span style="color: #002339">&lt;/</span><span style="color: #0444AC">script</span><span style="color: #002339">&gt;</span></span></code></pre></div></section></div><h2 id="不同尺寸" tabindex="-1">不同尺寸 <a class="header-anchor" href="#不同尺寸" aria-label="Permalink to &quot;不同尺寸&quot;">​</a></h2><div class="vitepress-demo-preview__element-plus__container" suffixname="vue" absolutepath="D:\Workspace\MyProject\bin-ui-design\demo\components\demo\Cascader\Size.vue" relativepath="./demo/Cascader/Size.vue"><section class="vitepress-demo-preview-preview"><!--[--><div flex><div class="block" style="width:220px;margin-right:20px;"><!--[--><div class="bin-cascader bin-cascader--large" aria-describedby="bin-popper-2178" style=""><div class="bin-input-wrapper bin-input-wrapper-large bin-input-type-text"><!--[--><!----><input autocomplete="off" type="text" class="bin-input bin-input-large bin-input-with-suffix" placeholder="" readonly value="" number="false"><!----><span class="bin-input-suffix"><!----><!----><!----><!--[--><i class="b-iconfont b-icon-down"></i><!--]--><!----></span><!----><!----><!----><!--]--></div><!----></div><!--teleport start--><!--teleport end--><!--]--></div><div class="block" style="width:220px;margin-right:20px;"><!--[--><div class="bin-cascader" aria-describedby="bin-popper-4263" style=""><div class="bin-input-wrapper bin-input-type-text"><!--[--><!----><input autocomplete="off" type="text" class="bin-input bin-input-with-suffix" placeholder="" readonly value="" number="false"><!----><span class="bin-input-suffix"><!----><!----><!----><!--[--><i class="b-iconfont b-icon-down"></i><!--]--><!----></span><!----><!----><!----><!--]--></div><!----></div><!--teleport start--><!--teleport end--><!--]--></div><div class="block" style="width:220px;margin-right:20px;"><!--[--><div class="bin-cascader bin-cascader--small" aria-describedby="bin-popper-8835" style=""><div class="bin-input-wrapper bin-input-wrapper-small bin-input-type-text"><!--[--><!----><input autocomplete="off" type="text" class="bin-input bin-input-small bin-input-with-suffix" placeholder="" readonly value="" number="false"><!----><span class="bin-input-suffix"><!----><!----><!----><!--[--><i class="b-iconfont b-icon-down"></i><!--]--><!----></span><!----><!----><!----><!--]--></div><!----></div><!--teleport start--><!--teleport end--><!--]--></div><div class="block" style="width:220px;margin-right:20px;"><!--[--><div class="bin-cascader bin-cascader--mini" aria-describedby="bin-popper-5063" style=""><div class="bin-input-wrapper bin-input-wrapper-mini bin-input-type-text"><!--[--><!----><input autocomplete="off" type="text" class="bin-input bin-input-mini bin-input-with-suffix" placeholder="" readonly value="" number="false"><!----><span class="bin-input-suffix"><!----><!----><!----><!--[--><i class="b-iconfont b-icon-down"></i><!--]--><!----></span><!----><!----><!----><!--]--></div><!----></div><!--teleport start--><!--teleport end--><!--]--></div></div><!--]--></section><section class="vitepress-demo-preview-description"><div class="vitepress-demo-preview-description__split-line"></div><div class="vitepress-demo-preview-description__handle-btn"><svg t="1661231422733" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3259" width="20" height="20"><path d="M682.666667 810.666667c-12.8 0-21.333333-4.266667-29.866667-12.8-17.066667-17.066667-17.066667-42.666667 0-59.733334l226.133333-226.133333-226.133333-226.133333c-17.066667-17.066667-17.066667-42.666667 0-59.733334s42.666667-17.066667 59.733333 0l256 256c17.066667 17.066667 17.066667 42.666667 0 59.733334l-256 256c-8.533333 8.533333-17.066667 12.8-29.866666 12.8zM341.333333 810.666667c-12.8 0-21.333333-4.266667-29.866666-12.8l-256-256c-17.066667-17.066667-17.066667-42.666667 0-59.733334l256-256c17.066667-17.066667 42.666667-17.066667 59.733333 0s17.066667 42.666667 0 59.733334L145.066667 512l226.133333 226.133333c17.066667 17.066667 17.066667 42.666667 0 59.733334-8.533333 8.533333-17.066667 12.8-29.866667 12.8z" p-id="3260"></path></svg><svg viewBox="0 0 544 560" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M399.503 143.667C399.319 152.501 406.332 159.812 415.167 159.997C424.001 160.181 431.312 153.168 431.497 144.333L399.503 143.667ZM416 120L431.997 120.333C431.999 120.207 432 120.081 432 119.954L416 120ZM360 64L360.046 48.0001C360.03 48 360.015 48 360 48L360 64ZM144 64V48C143.984 48 143.968 48 143.953 48.0001L144 64ZM80 128L64.0001 127.953C64 127.968 64 127.984 64 128L80 128ZM80 344H64C64 344.015 64 344.03 64.0001 344.046L80 344ZM136 400L135.954 416C135.97 416 135.985 416 136 416L136 400ZM160 416C168.837 416 176 408.837 176 400C176 391.163 168.837 384 160 384V416ZM217 160H439V128H217V160ZM439 160C461.644 160 480 178.356 480 201H512C512 160.683 479.317 128 439 128V160ZM480 201V423H512V201H480ZM480 423C480 445.644 461.644 464 439 464V496C479.317 496 512 463.317 512 423H480ZM439 464H217V496H439V464ZM217 464C194.356 464 176 445.644 176 423H144C144 463.317 176.683 496 217 496V464ZM176 423V201H144V423H176ZM176 201C176 178.356 194.356 160 217 160V128C176.683 128 144 160.683 144 201H176ZM431.497 144.333L431.997 120.333L400.003 119.667L399.503 143.667L431.497 144.333ZM432 119.954C431.946 100.888 424.347 82.6173 410.865 69.1349L388.238 91.7624C395.741 99.2658 399.97 109.434 400 120.046L432 119.954ZM410.865 69.1349C397.383 55.6526 379.112 48.0543 360.046 48.0001L359.954 79.9999C370.566 80.0301 380.734 84.2589 388.238 91.7624L410.865 69.1349ZM360 48H144V80H360V48ZM143.953 48.0001C122.767 48.0627 102.467 56.5064 87.4868 71.4868L110.114 94.1142C119.117 85.1118 131.316 80.0376 144.047 79.9999L143.953 48.0001ZM87.4868 71.4868C72.5064 86.4673 64.0627 106.767 64.0001 127.953L95.9999 128.047C96.0376 115.316 101.112 103.117 110.114 94.1142L87.4868 71.4868ZM64 128V344H96V128H64ZM64.0001 344.046C64.0543 363.112 71.6526 381.383 85.1349 394.865L107.762 372.238C100.259 364.734 96.0301 354.566 95.9999 343.954L64.0001 344.046ZM85.1349 394.865C98.6173 408.347 116.888 415.946 135.954 416L136.046 384C125.434 383.97 115.266 379.741 107.762 372.238L85.1349 394.865ZM136 416H160V384H136V416Z" fill="currentColor"></path></svg></div></section><section class="vitepress-demo-preview-source"><div class="language-vue"><pre v-pre class="shiki rose-pine-moon vp-code-dark" ><code><span class="line"><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">template</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">div</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">flex</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">div</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">class</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;block&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">style</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;width: 220px; margin-right: 20px&quot;</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-cascader</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">:options</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;options&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">size</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;large&quot;</span><span style="color: #6E6A86">&gt;&lt;/</span><span style="color: #9CCFD8">b-cascader</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">div</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">div</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">class</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;block&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">style</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;width: 220px; margin-right: 20px&quot;</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-cascader</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">:options</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;options&quot;</span><span style="color: #6E6A86">&gt;&lt;/</span><span style="color: #9CCFD8">b-cascader</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">div</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">div</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">class</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;block&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">style</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;width: 220px; margin-right: 20px&quot;</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-cascader</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">:options</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;options&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">size</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;small&quot;</span><span style="color: #6E6A86">&gt;&lt;/</span><span style="color: #9CCFD8">b-cascader</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">div</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">div</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">class</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;block&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">style</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;width: 220px; margin-right: 20px&quot;</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-cascader</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">:options</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;options&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">size</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;mini&quot;</span><span style="color: #6E6A86">&gt;&lt;/</span><span style="color: #9CCFD8">b-cascader</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">div</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">div</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">template</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">script</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">setup</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">lang</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;ts&quot;</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #3E8FB0">import </span><span style="color: #908CAA">{</span><span style="color: #3E8FB0"> </span><span style="color: #E0DEF4; font-style: italic">ref</span><span style="color: #3E8FB0"> </span><span style="color: #908CAA">}</span><span style="color: #3E8FB0"> from </span><span style="color: #F6C177">&#39;vue&#39;</span></span>
<span class="line"></span>
<span class="line"><span style="color: #3E8FB0">const</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">options</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">=</span><span style="color: #E0DEF4"> [</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">    value</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;nanjing&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    label</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;南京&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    children</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> [</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">        value</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;xuanwu&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">        label</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;玄武区&#39;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">        value</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;gulou&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">        label</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;鼓楼区&#39;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">        value</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;jianye&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">        label</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;建邺区&#39;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">}</span></span>
<span class="line"><span style="color: #E0DEF4">    ]</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">    value</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;xuzhou&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    label</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;徐州&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    children</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> [</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">        value</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;tongshan&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">        label</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;铜山区&#39;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">        value</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;gulou&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">        label</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;鼓楼区&#39;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">        value</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;yunlong&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">        label</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;云龙区&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">        children</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> [</span></span>
<span class="line"><span style="color: #E0DEF4">          </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> value</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;dalonghu&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> label</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;大龙湖街道&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">          </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> value</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;guozhuanglu&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> label</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;郭庄路街道&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">          </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> value</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;lvdi&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> label</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;绿地商务城&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">          </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> value</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;jinlonghu&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> label</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;金龙湖街道&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">}</span></span>
<span class="line"><span style="color: #E0DEF4">        ]</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">        value</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;jiawang&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">        label</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;贾汪区&#39;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> value</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;peixian&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> label</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;沛县&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> value</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;fengxian&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> label</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;丰县&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> value</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;pizhou&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> label</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;邳州市&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> value</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;xinyi&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> label</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;新沂市&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">}</span></span>
<span class="line"><span style="color: #E0DEF4">    ]</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">}</span></span>
<span class="line"><span style="color: #E0DEF4">]</span></span>
<span class="line"><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">script</span><span style="color: #6E6A86">&gt;</span></span></code></pre><pre v-pre class="shiki slack-ochin vp-code-light" ><code><span class="line"><span style="color: #002339">&lt;</span><span style="color: #0444AC">template</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">  &lt;</span><span style="color: #0444AC">div</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">flex</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">    &lt;</span><span style="color: #0444AC">div</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">class</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;block&quot;</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">style</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;width: 220px; margin-right: 20px&quot;</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">      &lt;</span><span style="color: #0444AC">b-cascader</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">:options</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;options&quot;</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">size</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;large&quot;</span><span style="color: #002339">&gt;&lt;/</span><span style="color: #0444AC">b-cascader</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">    &lt;/</span><span style="color: #0444AC">div</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">    &lt;</span><span style="color: #0444AC">div</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">class</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;block&quot;</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">style</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;width: 220px; margin-right: 20px&quot;</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">      &lt;</span><span style="color: #0444AC">b-cascader</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">:options</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;options&quot;</span><span style="color: #002339">&gt;&lt;/</span><span style="color: #0444AC">b-cascader</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">    &lt;/</span><span style="color: #0444AC">div</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">    &lt;</span><span style="color: #0444AC">div</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">class</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;block&quot;</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">style</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;width: 220px; margin-right: 20px&quot;</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">      &lt;</span><span style="color: #0444AC">b-cascader</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">:options</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;options&quot;</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">size</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;small&quot;</span><span style="color: #002339">&gt;&lt;/</span><span style="color: #0444AC">b-cascader</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">    &lt;/</span><span style="color: #0444AC">div</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">    &lt;</span><span style="color: #0444AC">div</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">class</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;block&quot;</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">style</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;width: 220px; margin-right: 20px&quot;</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">      &lt;</span><span style="color: #0444AC">b-cascader</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">:options</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;options&quot;</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">size</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;mini&quot;</span><span style="color: #002339">&gt;&lt;/</span><span style="color: #0444AC">b-cascader</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">    &lt;/</span><span style="color: #0444AC">div</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">  &lt;/</span><span style="color: #0444AC">div</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">&lt;/</span><span style="color: #0444AC">template</span><span style="color: #002339">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color: #002339">&lt;</span><span style="color: #0444AC">script</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">setup</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">lang</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;ts&quot;</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #7B30D0">import</span><span style="color: #002339"> { </span><span style="color: #2F86D2">ref</span><span style="color: #002339"> } </span><span style="color: #7B30D0">from</span><span style="color: #002339"> </span><span style="color: #A44185">&#39;vue&#39;</span></span>
<span class="line"></span>
<span class="line"><span style="color: #0991B6">const</span><span style="color: #002339"> </span><span style="color: #2F86D2">options</span><span style="color: #002339"> </span><span style="color: #7B30D0">=</span><span style="color: #002339"> [</span></span>
<span class="line"><span style="color: #002339">  {</span></span>
<span class="line"><span style="color: #002339">    value: </span><span style="color: #A44185">&#39;nanjing&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    label: </span><span style="color: #A44185">&#39;南京&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    children: [</span></span>
<span class="line"><span style="color: #002339">      {</span></span>
<span class="line"><span style="color: #002339">        value: </span><span style="color: #A44185">&#39;xuanwu&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">        label: </span><span style="color: #A44185">&#39;玄武区&#39;</span></span>
<span class="line"><span style="color: #002339">      },</span></span>
<span class="line"><span style="color: #002339">      {</span></span>
<span class="line"><span style="color: #002339">        value: </span><span style="color: #A44185">&#39;gulou&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">        label: </span><span style="color: #A44185">&#39;鼓楼区&#39;</span></span>
<span class="line"><span style="color: #002339">      },</span></span>
<span class="line"><span style="color: #002339">      {</span></span>
<span class="line"><span style="color: #002339">        value: </span><span style="color: #A44185">&#39;jianye&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">        label: </span><span style="color: #A44185">&#39;建邺区&#39;</span></span>
<span class="line"><span style="color: #002339">      }</span></span>
<span class="line"><span style="color: #002339">    ]</span></span>
<span class="line"><span style="color: #002339">  },</span></span>
<span class="line"><span style="color: #002339">  {</span></span>
<span class="line"><span style="color: #002339">    value: </span><span style="color: #A44185">&#39;xuzhou&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    label: </span><span style="color: #A44185">&#39;徐州&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    children: [</span></span>
<span class="line"><span style="color: #002339">      {</span></span>
<span class="line"><span style="color: #002339">        value: </span><span style="color: #A44185">&#39;tongshan&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">        label: </span><span style="color: #A44185">&#39;铜山区&#39;</span></span>
<span class="line"><span style="color: #002339">      },</span></span>
<span class="line"><span style="color: #002339">      {</span></span>
<span class="line"><span style="color: #002339">        value: </span><span style="color: #A44185">&#39;gulou&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">        label: </span><span style="color: #A44185">&#39;鼓楼区&#39;</span></span>
<span class="line"><span style="color: #002339">      },</span></span>
<span class="line"><span style="color: #002339">      {</span></span>
<span class="line"><span style="color: #002339">        value: </span><span style="color: #A44185">&#39;yunlong&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">        label: </span><span style="color: #A44185">&#39;云龙区&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">        children: [</span></span>
<span class="line"><span style="color: #002339">          { value: </span><span style="color: #A44185">&#39;dalonghu&#39;</span><span style="color: #002339">, label: </span><span style="color: #A44185">&#39;大龙湖街道&#39;</span><span style="color: #002339"> },</span></span>
<span class="line"><span style="color: #002339">          { value: </span><span style="color: #A44185">&#39;guozhuanglu&#39;</span><span style="color: #002339">, label: </span><span style="color: #A44185">&#39;郭庄路街道&#39;</span><span style="color: #002339"> },</span></span>
<span class="line"><span style="color: #002339">          { value: </span><span style="color: #A44185">&#39;lvdi&#39;</span><span style="color: #002339">, label: </span><span style="color: #A44185">&#39;绿地商务城&#39;</span><span style="color: #002339"> },</span></span>
<span class="line"><span style="color: #002339">          { value: </span><span style="color: #A44185">&#39;jinlonghu&#39;</span><span style="color: #002339">, label: </span><span style="color: #A44185">&#39;金龙湖街道&#39;</span><span style="color: #002339"> }</span></span>
<span class="line"><span style="color: #002339">        ]</span></span>
<span class="line"><span style="color: #002339">      },</span></span>
<span class="line"><span style="color: #002339">      {</span></span>
<span class="line"><span style="color: #002339">        value: </span><span style="color: #A44185">&#39;jiawang&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">        label: </span><span style="color: #A44185">&#39;贾汪区&#39;</span></span>
<span class="line"><span style="color: #002339">      },</span></span>
<span class="line"><span style="color: #002339">      { value: </span><span style="color: #A44185">&#39;peixian&#39;</span><span style="color: #002339">, label: </span><span style="color: #A44185">&#39;沛县&#39;</span><span style="color: #002339"> },</span></span>
<span class="line"><span style="color: #002339">      { value: </span><span style="color: #A44185">&#39;fengxian&#39;</span><span style="color: #002339">, label: </span><span style="color: #A44185">&#39;丰县&#39;</span><span style="color: #002339"> },</span></span>
<span class="line"><span style="color: #002339">      { value: </span><span style="color: #A44185">&#39;pizhou&#39;</span><span style="color: #002339">, label: </span><span style="color: #A44185">&#39;邳州市&#39;</span><span style="color: #002339"> },</span></span>
<span class="line"><span style="color: #002339">      { value: </span><span style="color: #A44185">&#39;xinyi&#39;</span><span style="color: #002339">, label: </span><span style="color: #A44185">&#39;新沂市&#39;</span><span style="color: #002339"> }</span></span>
<span class="line"><span style="color: #002339">    ]</span></span>
<span class="line"><span style="color: #002339">  }</span></span>
<span class="line"><span style="color: #002339">]</span></span>
<span class="line"><span style="color: #002339">&lt;/</span><span style="color: #0444AC">script</span><span style="color: #002339">&gt;</span></span></code></pre></div></section></div><h2 id="级联面板" tabindex="-1">级联面板 <a class="header-anchor" href="#级联面板" aria-label="Permalink to &quot;级联面板&quot;">​</a></h2><p>可以不采用popper弹窗的面板显示。与级联选择器一样使用</p><div class="vitepress-demo-preview__element-plus__container" suffixname="vue" absolutepath="D:\Workspace\MyProject\bin-ui-design\demo\components\demo\Cascader\Panel.vue" relativepath="./demo/Cascader/Panel.vue"><section class="vitepress-demo-preview-preview"><!--[--><div flex><div class="block" style="margin-right:20px;"><div class="bin-cascader-panel is-bordered"><!--[--><div class="bin-scrollbar bin-cascader-menu" id="cascader-menu-85-0" role="menu"><div class="bin-cascader-menu__wrap bin-scrollbar__wrap bin-scrollbar__wrap--hidden-default" style=""><ul class="bin-scrollbar__view bin-cascader-menu__list" style=""><!--[--><!--[--><li id="cascader-menu-85-0-290" role="menuitem" aria-haspopup="true" aria-owns="cascader-menu-85-0" aria-expanded="false" tabindex="-1" class="bin-cascader-node"><!----><span class="bin-cascader-node__label">南京</span><!--[--><i class="b-iconfont b-icon-right bin-cascader-node__postfix"></i><!--]--></li><li id="cascader-menu-85-0-294" role="menuitem" aria-haspopup="true" aria-owns="cascader-menu-85-0" aria-expanded="false" tabindex="-1" class="bin-cascader-node"><!----><span class="bin-cascader-node__label">徐州</span><!--[--><i class="b-iconfont b-icon-right bin-cascader-node__postfix"></i><!--]--></li><!--]--><!----><!--]--></ul></div><!--[--><div class="bin-scrollbar__bar is-horizontal" style=""><div class="bin-scrollbar__thumb" style="width:0;transform:translateX(0%);ms-transform:translateX(0%);webkit-transform:translateX(0%);"></div></div><div class="bin-scrollbar__bar is-vertical" style=""><div class="bin-scrollbar__thumb" style="height:0;transform:translateY(0%);ms-transform:translateY(0%);webkit-transform:translateY(0%);"></div></div><!--]--></div><!--]--></div></div><div class="block" style="width:220px;margin-right:20px;"><div class="mt-5">[]</div></div></div><!--]--></section><section class="vitepress-demo-preview-description"><div class="vitepress-demo-preview-description__split-line"></div><div class="vitepress-demo-preview-description__handle-btn"><svg t="1661231422733" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3259" width="20" height="20"><path d="M682.666667 810.666667c-12.8 0-21.333333-4.266667-29.866667-12.8-17.066667-17.066667-17.066667-42.666667 0-59.733334l226.133333-226.133333-226.133333-226.133333c-17.066667-17.066667-17.066667-42.666667 0-59.733334s42.666667-17.066667 59.733333 0l256 256c17.066667 17.066667 17.066667 42.666667 0 59.733334l-256 256c-8.533333 8.533333-17.066667 12.8-29.866666 12.8zM341.333333 810.666667c-12.8 0-21.333333-4.266667-29.866666-12.8l-256-256c-17.066667-17.066667-17.066667-42.666667 0-59.733334l256-256c17.066667-17.066667 42.666667-17.066667 59.733333 0s17.066667 42.666667 0 59.733334L145.066667 512l226.133333 226.133333c17.066667 17.066667 17.066667 42.666667 0 59.733334-8.533333 8.533333-17.066667 12.8-29.866667 12.8z" p-id="3260"></path></svg><svg viewBox="0 0 544 560" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M399.503 143.667C399.319 152.501 406.332 159.812 415.167 159.997C424.001 160.181 431.312 153.168 431.497 144.333L399.503 143.667ZM416 120L431.997 120.333C431.999 120.207 432 120.081 432 119.954L416 120ZM360 64L360.046 48.0001C360.03 48 360.015 48 360 48L360 64ZM144 64V48C143.984 48 143.968 48 143.953 48.0001L144 64ZM80 128L64.0001 127.953C64 127.968 64 127.984 64 128L80 128ZM80 344H64C64 344.015 64 344.03 64.0001 344.046L80 344ZM136 400L135.954 416C135.97 416 135.985 416 136 416L136 400ZM160 416C168.837 416 176 408.837 176 400C176 391.163 168.837 384 160 384V416ZM217 160H439V128H217V160ZM439 160C461.644 160 480 178.356 480 201H512C512 160.683 479.317 128 439 128V160ZM480 201V423H512V201H480ZM480 423C480 445.644 461.644 464 439 464V496C479.317 496 512 463.317 512 423H480ZM439 464H217V496H439V464ZM217 464C194.356 464 176 445.644 176 423H144C144 463.317 176.683 496 217 496V464ZM176 423V201H144V423H176ZM176 201C176 178.356 194.356 160 217 160V128C176.683 128 144 160.683 144 201H176ZM431.497 144.333L431.997 120.333L400.003 119.667L399.503 143.667L431.497 144.333ZM432 119.954C431.946 100.888 424.347 82.6173 410.865 69.1349L388.238 91.7624C395.741 99.2658 399.97 109.434 400 120.046L432 119.954ZM410.865 69.1349C397.383 55.6526 379.112 48.0543 360.046 48.0001L359.954 79.9999C370.566 80.0301 380.734 84.2589 388.238 91.7624L410.865 69.1349ZM360 48H144V80H360V48ZM143.953 48.0001C122.767 48.0627 102.467 56.5064 87.4868 71.4868L110.114 94.1142C119.117 85.1118 131.316 80.0376 144.047 79.9999L143.953 48.0001ZM87.4868 71.4868C72.5064 86.4673 64.0627 106.767 64.0001 127.953L95.9999 128.047C96.0376 115.316 101.112 103.117 110.114 94.1142L87.4868 71.4868ZM64 128V344H96V128H64ZM64.0001 344.046C64.0543 363.112 71.6526 381.383 85.1349 394.865L107.762 372.238C100.259 364.734 96.0301 354.566 95.9999 343.954L64.0001 344.046ZM85.1349 394.865C98.6173 408.347 116.888 415.946 135.954 416L136.046 384C125.434 383.97 115.266 379.741 107.762 372.238L85.1349 394.865ZM136 416H160V384H136V416Z" fill="currentColor"></path></svg></div></section><section class="vitepress-demo-preview-source"><div class="language-vue"><pre v-pre class="shiki rose-pine-moon vp-code-dark" ><code><span class="line"><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">template</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">div</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">flex</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">div</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">class</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;block&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">style</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;margin-right: 20px&quot;</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-cascader-panel</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">v-model</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;selected&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">:options</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;options&quot;</span><span style="color: #6E6A86">&gt;&lt;/</span><span style="color: #9CCFD8">b-cascader-panel</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">div</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">div</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">class</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;block&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">style</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;width: 220px; margin-right: 20px&quot;</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">div</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">class</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;mt-5&quot;</span><span style="color: #6E6A86">&gt;</span><span style="color: #E0DEF4">{{ selected }}</span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">div</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">div</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">div</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">template</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">script</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">setup</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">lang</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;ts&quot;</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #3E8FB0">import </span><span style="color: #908CAA">{</span><span style="color: #3E8FB0"> </span><span style="color: #E0DEF4; font-style: italic">ref</span><span style="color: #3E8FB0"> </span><span style="color: #908CAA">}</span><span style="color: #3E8FB0"> from </span><span style="color: #F6C177">&#39;vue&#39;</span></span>
<span class="line"></span>
<span class="line"><span style="color: #3E8FB0">const</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">options</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">=</span><span style="color: #E0DEF4"> [</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">    value</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;nanjing&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    label</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;南京&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    children</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> [</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">        value</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;xuanwu&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">        label</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;玄武区&#39;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">        value</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;gulou&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">        label</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;鼓楼区&#39;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">        value</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;jianye&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">        label</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;建邺区&#39;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">}</span></span>
<span class="line"><span style="color: #E0DEF4">    ]</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">    value</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;xuzhou&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    label</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;徐州&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    children</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> [</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">        value</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;tongshan&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">        label</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;铜山区&#39;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">        value</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;gulou&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">        label</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;鼓楼区&#39;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">        value</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;yunlong&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">        label</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;云龙区&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">        children</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> [</span></span>
<span class="line"><span style="color: #E0DEF4">          </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> value</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;dalonghu&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> label</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;大龙湖街道&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">          </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> value</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;guozhuanglu&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> label</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;郭庄路街道&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">          </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> value</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;lvdi&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> label</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;绿地商务城&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">          </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> value</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;jinlonghu&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> label</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;金龙湖街道&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">}</span></span>
<span class="line"><span style="color: #E0DEF4">        ]</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">        value</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;jiawang&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">        label</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;贾汪区&#39;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> value</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;peixian&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> label</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;沛县&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> value</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;fengxian&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> label</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;丰县&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> value</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;pizhou&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> label</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;邳州市&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> value</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;xinyi&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> label</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;新沂市&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">}</span></span>
<span class="line"><span style="color: #E0DEF4">    ]</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">}</span></span>
<span class="line"><span style="color: #E0DEF4">]</span></span>
<span class="line"><span style="color: #3E8FB0">const</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">selected</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">=</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">ref</span><span style="color: #E0DEF4">([])</span></span>
<span class="line"><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">script</span><span style="color: #6E6A86">&gt;</span></span></code></pre><pre v-pre class="shiki slack-ochin vp-code-light" ><code><span class="line"><span style="color: #002339">&lt;</span><span style="color: #0444AC">template</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">  &lt;</span><span style="color: #0444AC">div</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">flex</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">    &lt;</span><span style="color: #0444AC">div</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">class</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;block&quot;</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">style</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;margin-right: 20px&quot;</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">      &lt;</span><span style="color: #0444AC">b-cascader-panel</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">v-model</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;selected&quot;</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">:options</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;options&quot;</span><span style="color: #002339">&gt;&lt;/</span><span style="color: #0444AC">b-cascader-panel</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">    &lt;/</span><span style="color: #0444AC">div</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">    &lt;</span><span style="color: #0444AC">div</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">class</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;block&quot;</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">style</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;width: 220px; margin-right: 20px&quot;</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">      &lt;</span><span style="color: #0444AC">div</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">class</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;mt-5&quot;</span><span style="color: #002339">&gt;{{ selected }}&lt;/</span><span style="color: #0444AC">div</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">    &lt;/</span><span style="color: #0444AC">div</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">  &lt;/</span><span style="color: #0444AC">div</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">&lt;/</span><span style="color: #0444AC">template</span><span style="color: #002339">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color: #002339">&lt;</span><span style="color: #0444AC">script</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">setup</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">lang</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;ts&quot;</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #7B30D0">import</span><span style="color: #002339"> { </span><span style="color: #2F86D2">ref</span><span style="color: #002339"> } </span><span style="color: #7B30D0">from</span><span style="color: #002339"> </span><span style="color: #A44185">&#39;vue&#39;</span></span>
<span class="line"></span>
<span class="line"><span style="color: #0991B6">const</span><span style="color: #002339"> </span><span style="color: #2F86D2">options</span><span style="color: #002339"> </span><span style="color: #7B30D0">=</span><span style="color: #002339"> [</span></span>
<span class="line"><span style="color: #002339">  {</span></span>
<span class="line"><span style="color: #002339">    value: </span><span style="color: #A44185">&#39;nanjing&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    label: </span><span style="color: #A44185">&#39;南京&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    children: [</span></span>
<span class="line"><span style="color: #002339">      {</span></span>
<span class="line"><span style="color: #002339">        value: </span><span style="color: #A44185">&#39;xuanwu&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">        label: </span><span style="color: #A44185">&#39;玄武区&#39;</span></span>
<span class="line"><span style="color: #002339">      },</span></span>
<span class="line"><span style="color: #002339">      {</span></span>
<span class="line"><span style="color: #002339">        value: </span><span style="color: #A44185">&#39;gulou&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">        label: </span><span style="color: #A44185">&#39;鼓楼区&#39;</span></span>
<span class="line"><span style="color: #002339">      },</span></span>
<span class="line"><span style="color: #002339">      {</span></span>
<span class="line"><span style="color: #002339">        value: </span><span style="color: #A44185">&#39;jianye&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">        label: </span><span style="color: #A44185">&#39;建邺区&#39;</span></span>
<span class="line"><span style="color: #002339">      }</span></span>
<span class="line"><span style="color: #002339">    ]</span></span>
<span class="line"><span style="color: #002339">  },</span></span>
<span class="line"><span style="color: #002339">  {</span></span>
<span class="line"><span style="color: #002339">    value: </span><span style="color: #A44185">&#39;xuzhou&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    label: </span><span style="color: #A44185">&#39;徐州&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    children: [</span></span>
<span class="line"><span style="color: #002339">      {</span></span>
<span class="line"><span style="color: #002339">        value: </span><span style="color: #A44185">&#39;tongshan&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">        label: </span><span style="color: #A44185">&#39;铜山区&#39;</span></span>
<span class="line"><span style="color: #002339">      },</span></span>
<span class="line"><span style="color: #002339">      {</span></span>
<span class="line"><span style="color: #002339">        value: </span><span style="color: #A44185">&#39;gulou&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">        label: </span><span style="color: #A44185">&#39;鼓楼区&#39;</span></span>
<span class="line"><span style="color: #002339">      },</span></span>
<span class="line"><span style="color: #002339">      {</span></span>
<span class="line"><span style="color: #002339">        value: </span><span style="color: #A44185">&#39;yunlong&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">        label: </span><span style="color: #A44185">&#39;云龙区&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">        children: [</span></span>
<span class="line"><span style="color: #002339">          { value: </span><span style="color: #A44185">&#39;dalonghu&#39;</span><span style="color: #002339">, label: </span><span style="color: #A44185">&#39;大龙湖街道&#39;</span><span style="color: #002339"> },</span></span>
<span class="line"><span style="color: #002339">          { value: </span><span style="color: #A44185">&#39;guozhuanglu&#39;</span><span style="color: #002339">, label: </span><span style="color: #A44185">&#39;郭庄路街道&#39;</span><span style="color: #002339"> },</span></span>
<span class="line"><span style="color: #002339">          { value: </span><span style="color: #A44185">&#39;lvdi&#39;</span><span style="color: #002339">, label: </span><span style="color: #A44185">&#39;绿地商务城&#39;</span><span style="color: #002339"> },</span></span>
<span class="line"><span style="color: #002339">          { value: </span><span style="color: #A44185">&#39;jinlonghu&#39;</span><span style="color: #002339">, label: </span><span style="color: #A44185">&#39;金龙湖街道&#39;</span><span style="color: #002339"> }</span></span>
<span class="line"><span style="color: #002339">        ]</span></span>
<span class="line"><span style="color: #002339">      },</span></span>
<span class="line"><span style="color: #002339">      {</span></span>
<span class="line"><span style="color: #002339">        value: </span><span style="color: #A44185">&#39;jiawang&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">        label: </span><span style="color: #A44185">&#39;贾汪区&#39;</span></span>
<span class="line"><span style="color: #002339">      },</span></span>
<span class="line"><span style="color: #002339">      { value: </span><span style="color: #A44185">&#39;peixian&#39;</span><span style="color: #002339">, label: </span><span style="color: #A44185">&#39;沛县&#39;</span><span style="color: #002339"> },</span></span>
<span class="line"><span style="color: #002339">      { value: </span><span style="color: #A44185">&#39;fengxian&#39;</span><span style="color: #002339">, label: </span><span style="color: #A44185">&#39;丰县&#39;</span><span style="color: #002339"> },</span></span>
<span class="line"><span style="color: #002339">      { value: </span><span style="color: #A44185">&#39;pizhou&#39;</span><span style="color: #002339">, label: </span><span style="color: #A44185">&#39;邳州市&#39;</span><span style="color: #002339"> },</span></span>
<span class="line"><span style="color: #002339">      { value: </span><span style="color: #A44185">&#39;xinyi&#39;</span><span style="color: #002339">, label: </span><span style="color: #A44185">&#39;新沂市&#39;</span><span style="color: #002339"> }</span></span>
<span class="line"><span style="color: #002339">    ]</span></span>
<span class="line"><span style="color: #002339">  }</span></span>
<span class="line"><span style="color: #002339">]</span></span>
<span class="line"><span style="color: #0991B6">const</span><span style="color: #002339"> </span><span style="color: #2F86D2">selected</span><span style="color: #002339"> </span><span style="color: #7B30D0">=</span><span style="color: #002339"> </span><span style="color: #7EB233">ref</span><span style="color: #002339">([])</span></span>
<span class="line"><span style="color: #002339">&lt;/</span><span style="color: #0444AC">script</span><span style="color: #002339">&gt;</span></span></code></pre></div></section></div><h2 id="cascader-props" tabindex="-1">Cascader Props <a class="header-anchor" href="#cascader-props" aria-label="Permalink to &quot;Cascader Props&quot;">​</a></h2><table><thead><tr><th>参数</th><th>说明</th><th>类型</th><th>可选值</th><th>默认值</th></tr></thead><tbody><tr><td>value / v-model</td><td>选中项绑定值</td><td>-</td><td>—</td><td>—</td></tr><tr><td>options</td><td>可选项数据源，键名可通过 <code>Props</code> 属性配置</td><td>array</td><td>—</td><td>—</td></tr><tr><td>props</td><td>配置选项，具体见下表</td><td>object</td><td>—</td><td>—</td></tr><tr><td>size</td><td>尺寸</td><td>string</td><td>medium / small / mini</td><td>—</td></tr><tr><td>placeholder</td><td>输入框占位文本</td><td>string</td><td>—</td><td>请选择</td></tr><tr><td>disabled</td><td>是否禁用</td><td>boolean</td><td>—</td><td>false</td></tr><tr><td>clearable</td><td>是否支持清空选项</td><td>boolean</td><td>—</td><td>false</td></tr><tr><td>show-all-levels</td><td>输入框中是否显示选中值的完整路径</td><td>boolean</td><td>—</td><td>true</td></tr><tr><td>collapse-tags</td><td>多选模式下是否折叠Tag</td><td>boolean</td><td>-</td><td>false</td></tr><tr><td>separator</td><td>选项分隔符</td><td>string</td><td>—</td><td>斜杠&#39; / &#39;</td></tr><tr><td>filterable</td><td>是否可搜索选项</td><td>boolean</td><td>—</td><td>—</td></tr><tr><td>filter-method</td><td>自定义搜索逻辑，第一个参数是节点<code>node</code>，第二个参数是搜索关键词<code>keyword</code>，通过返回布尔值表示是否命中</td><td>function(node, keyword)</td><td>-</td><td>-</td></tr><tr><td>debounce</td><td>搜索关键词输入的去抖延迟，毫秒</td><td>number</td><td>—</td><td>300</td></tr><tr><td>before-filter</td><td>筛选之前的钩子，参数为输入的值，若返回 false 或者返回 Promise 且被 reject，则停止筛选</td><td>function(value)</td><td>—</td><td>—</td></tr><tr><td>popper-class</td><td>自定义浮层类名</td><td>string</td><td>—</td><td>—</td></tr></tbody></table><h2 id="cascader-events" tabindex="-1">Cascader Events <a class="header-anchor" href="#cascader-events" aria-label="Permalink to &quot;Cascader Events&quot;">​</a></h2><table><thead><tr><th>事件名称</th><th>说明</th><th>回调参数</th></tr></thead><tbody><tr><td>change</td><td>当选中节点变化时触发</td><td>选中节点的值</td></tr><tr><td>expand-change</td><td>当展开节点发生变化时触发</td><td>各父级选项值组成的数组</td></tr><tr><td>blur</td><td>当失去焦点时触发</td><td>(event: Event)</td></tr><tr><td>focus</td><td>当获得焦点时触发</td><td>(event: Event)</td></tr><tr><td>visible-change</td><td>下拉框出现/隐藏时触发</td><td>出现则为 true，隐藏则为 false</td></tr><tr><td>remove-tag</td><td>在多选模式下，移除Tag时触发</td><td>移除的Tag对应的节点的值</td></tr></tbody></table><h2 id="cascader-methods" tabindex="-1">Cascader Methods <a class="header-anchor" href="#cascader-methods" aria-label="Permalink to &quot;Cascader Methods&quot;">​</a></h2><table><thead><tr><th>方法名</th><th>说明</th><th>参数</th></tr></thead><tbody><tr><td>getCheckedNodes</td><td>获取选中的节点</td><td>(leafOnly) 是否只是叶子节点，默认值为 <code>false</code></td></tr></tbody></table><h2 id="cascader-slots" tabindex="-1">Cascader Slots <a class="header-anchor" href="#cascader-slots" aria-label="Permalink to &quot;Cascader Slots&quot;">​</a></h2><table><thead><tr><th>名称</th><th>说明</th></tr></thead><tbody><tr><td>-</td><td>自定义备选项的节点内容，参数为 { node, data }，分别为当前节点的 Node 对象和数据</td></tr><tr><td>empty</td><td>无匹配选项时的内容</td></tr></tbody></table><h2 id="cascaderpanel-attributes" tabindex="-1">CascaderPanel Attributes <a class="header-anchor" href="#cascaderpanel-attributes" aria-label="Permalink to &quot;CascaderPanel Attributes&quot;">​</a></h2><table><thead><tr><th>参数</th><th>说明</th><th>类型</th><th>可选值</th><th>默认值</th></tr></thead><tbody><tr><td>value / v-model</td><td>选中项绑定值</td><td>-</td><td>—</td><td>—</td></tr><tr><td>options</td><td>可选项数据源，键名可通过 <code>Props</code> 属性配置</td><td>array</td><td>—</td><td>—</td></tr><tr><td>props</td><td>配置选项，具体见下表</td><td>object</td><td>—</td><td>—</td></tr></tbody></table><h2 id="cascaderpanel-events" tabindex="-1">CascaderPanel Events <a class="header-anchor" href="#cascaderpanel-events" aria-label="Permalink to &quot;CascaderPanel Events&quot;">​</a></h2><table><thead><tr><th>事件名称</th><th>说明</th><th>回调参数</th></tr></thead><tbody><tr><td>change</td><td>当选中节点变化时触发</td><td>选中节点的值</td></tr><tr><td>expand-change</td><td>当展开节点发生变化时触发</td><td>各父级选项值组成的数组</td></tr></tbody></table><h2 id="cascaderpanel-methods" tabindex="-1">CascaderPanel Methods <a class="header-anchor" href="#cascaderpanel-methods" aria-label="Permalink to &quot;CascaderPanel Methods&quot;">​</a></h2><table><thead><tr><th>方法名</th><th>说明</th><th>参数</th></tr></thead><tbody><tr><td>getCheckedNodes</td><td>获取选中的节点数组</td><td>(leafOnly) 是否只是叶子节点，默认值为 <code>false</code></td></tr><tr><td>clearCheckedNodes</td><td>清空选中的节点</td><td>-</td></tr></tbody></table><h2 id="cascaderpanel-slots" tabindex="-1">CascaderPanel Slots <a class="header-anchor" href="#cascaderpanel-slots" aria-label="Permalink to &quot;CascaderPanel Slots&quot;">​</a></h2><table><thead><tr><th>名称</th><th>说明</th></tr></thead><tbody><tr><td>-</td><td>自定义备选项的节点内容，参数为 { node, data }，分别为当前节点的 Node 对象和数据</td></tr></tbody></table><h2 id="props" tabindex="-1">Props <a class="header-anchor" href="#props" aria-label="Permalink to &quot;Props&quot;">​</a></h2><table><thead><tr><th>参数</th><th>说明</th><th>类型</th><th>可选值</th><th>默认值</th></tr></thead><tbody><tr><td>expandTrigger</td><td>次级菜单的展开方式</td><td>string</td><td>click / hover</td><td>&#39;click&#39;</td></tr><tr><td>multiple</td><td>是否多选</td><td>boolean</td><td>-</td><td>false</td></tr><tr><td>checkStrictly</td><td>是否严格的遵守父子节点不互相关联</td><td>boolean</td><td>-</td><td>false</td></tr><tr><td>emitPath</td><td>在选中节点改变时，是否返回由该节点所在的各级菜单的值所组成的数组，若设置 false，则只返回该节点的值</td><td>boolean</td><td>-</td><td>true</td></tr><tr><td>lazy</td><td>是否动态加载子节点，需与 lazyLoad 方法结合使用</td><td>boolean</td><td>-</td><td>false</td></tr><tr><td>lazyLoad</td><td>加载动态数据的方法，仅在 lazy 为 true 时有效</td><td>function(node, resolve)，<code>node</code>为当前点击的节点，<code>resolve</code>为数据加载完成的回调(必须调用)</td><td>-</td><td>-</td></tr><tr><td>value</td><td>指定选项的值为选项对象的某个属性值</td><td>string</td><td>—</td><td>&#39;value&#39;</td></tr><tr><td>label</td><td>指定选项标签为选项对象的某个属性值</td><td>string</td><td>—</td><td>&#39;label&#39;</td></tr><tr><td>children</td><td>指定选项的子选项为选项对象的某个属性值</td><td>string</td><td>—</td><td>&#39;children&#39;</td></tr><tr><td>disabled</td><td>指定选项的禁用为选项对象的某个属性值</td><td>string</td><td>—</td><td>&#39;disabled&#39;</td></tr><tr><td>leaf</td><td>指定选项的叶子节点的标志位为选项对象的某个属性值</td><td>string</td><td>—</td><td>&#39;leaf&#39;</td></tr></tbody></table></div></div></main><footer class="VPDocFooter" data-v-9f9999b2 data-v-61fb544c><!--[--><!--]--><!----><nav class="prev-next" data-v-61fb544c><div class="pager" data-v-61fb544c><a class="pager-link prev" href="/bin-ui-design/components/select.html" data-v-61fb544c><span class="desc" data-v-61fb544c>Previous page</span><span class="title" data-v-61fb544c><i class="b-iconfont b-icon-unorderedlist"></i>选择器<span>Select</span></span></a></div><div class="pager" data-v-61fb544c><a class="pager-link next" href="/bin-ui-design/components/date-picker.html" data-v-61fb544c><span class="desc" data-v-61fb544c>Next page</span><span class="title" data-v-61fb544c><i class="b-iconfont b-icon-calendar"></i>日期选择器<span>DatePicker</span></span></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-10b21a41 data-v-1c165e87><div class="container" data-v-1c165e87><!----><p class="copyright" data-v-1c165e87>MIT Licensed | Copyright © 2023-present bin-ui-design</p></div></footer><!--[--><!--]--></div></div>
    <script>window.__VP_HASH_MAP__=JSON.parse("{\"components_calendar.md\":\"ed1fb758\",\"components_affix.md\":\"c7b107b7\",\"components_back-top.md\":\"a90798a3\",\"components_breadcrumb.md\":\"e45c7120\",\"components_badge.md\":\"a83e273c\",\"components_alert.md\":\"fce5ac8e\",\"components_contextmenu.md\":\"3a8ef142\",\"components_circle.md\":\"7c03ee32\",\"components_config-provider.md\":\"bbf6fd0c\",\"components_checkbox.md\":\"2cb0b537\",\"components_carousel.md\":\"501e54e7\",\"components_empty.md\":\"0f6ba589\",\"components_layout.md\":\"e372cf7d\",\"components_count-to.md\":\"4af99aa6\",\"components_loading-bar.md\":\"dac78d00\",\"components_desc.md\":\"e468461f\",\"components_scrollbar.md\":\"291e9d8e\",\"components_anchor.md\":\"9b9a5663\",\"components_card.md\":\"8f27d101\",\"components_divider.md\":\"b50c7752\",\"docs_changelog.md\":\"deb42a54\",\"components_color-picker.md\":\"67dfd5c6\",\"components_notice.md\":\"a4721004\",\"docs_introduction.md\":\"e33e2b29\",\"index.md\":\"554113db\",\"components_button.md\":\"c7f6d651\",\"components_page.md\":\"8728f48d\",\"components_split.md\":\"383fbbe8\",\"docs_jsx.md\":\"58e48e69\",\"components_collapse.md\":\"39f1c339\",\"components_input-number.md\":\"b95178ec\",\"docs_common-directive.md\":\"79801c01\",\"docs_color-design.md\":\"1674c3b9\",\"components_trend.md\":\"2b24adde\",\"components_message-box.md\":\"5ea759a2\",\"components_dropdown.md\":\"13a35e2a\",\"components_upload.md\":\"5e2cedc1\",\"components_rate.md\":\"35271357\",\"docs_import-on-demand.md\":\"ffd56fe6\",\"components_radio.md\":\"5fd31931\",\"components_switch.md\":\"473de9e1\",\"docs_usage-sfc.md\":\"4b699947\",\"docs_common-transition.md\":\"3e08447c\",\"docs_installation.md\":\"f27febf3\",\"components_image.md\":\"30431bac\",\"docs_custom-theme.md\":\"f26d8f9a\",\"components_popper.md\":\"5c9082ec\",\"components_message.md\":\"d61ecb84\",\"components_steps.md\":\"de125854\",\"components_space.md\":\"20f9ed13\",\"components_input.md\":\"37684c1c\",\"components_tag.md\":\"17b4b0b1\",\"components_loading.md\":\"822d7cf0\",\"components_time-picker.md\":\"ca9c42c9\",\"components_slider.md\":\"fa819be3\",\"components_menu.md\":\"7998f13c\",\"components_skeleton.md\":\"54c428ce\",\"components_select.md\":\"d96ed960\",\"components_drawer.md\":\"7520003f\",\"components_popover.md\":\"7a2b8b43\",\"components_timeline.md\":\"e9bdf997\",\"docs_common-css.md\":\"2b6e0566\",\"components_progress.md\":\"4a41caad\",\"components_icon.md\":\"e611d267\",\"docs_common-api.md\":\"34166aab\",\"components_cascader.md\":\"9ad54021\",\"components_tooltip.md\":\"18368c1a\",\"components_grid.md\":\"d5620c5c\",\"components_tabs.md\":\"67864029\",\"components_modal.md\":\"0d1f6c25\",\"components_date-picker.md\":\"e2b2057a\",\"components_form.md\":\"5d25e7cb\",\"components_table.md\":\"6af60abd\",\"components_tree.md\":\"d80b44bd\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"BIN-UI-DESIGN\",\"description\":\"A Compontnts Lib for Vue3\",\"base\":\"/bin-ui-design/\",\"head\":[],\"appearance\":true,\"themeConfig\":{\"logo\":\"/logo.svg\",\"siteTitle\":\"BIN-UI-DESIGN\",\"search\":{\"provider\":\"local\"},\"nav\":[{\"text\":\"文档\",\"link\":\"/docs/introduction\",\"activeMatch\":\"/docs/\"},{\"text\":\"组件\",\"link\":\"/components/button\",\"activeMatch\":\"/components/\"},{\"text\":\"生态系统\",\"items\":[{\"text\":\"资源\",\"link\":\"\"},{\"text\":\"bin-admin-pro\",\"link\":\"https://wangbin3162.github.io/bin-admin-pro/\",\"target\":\"_blank\"},{\"text\":\"bin-datav\",\"link\":\"https://wangbin3162.github.io/bin-datav\",\"target\":\"_blank\"},{\"text\":\"bin-datav-schema\",\"link\":\"https://wangbin3162.github.io/bin-datav-schema/\",\"target\":\"_blank\"},{\"text\":\"官方库v3\",\"link\":\"\"},{\"text\":\"bin-ui-next\",\"link\":\"https://wangbin3162.github.io/bin-ui-next/\",\"target\":\"_blank\"},{\"text\":\"bin-editor-next\",\"link\":\"https://wangbin3162.github.io/bin-editor-next/\",\"target\":\"_blank\"},{\"text\":\"bin-charts-next\",\"link\":\"https://wangbin3162.github.io/bin-charts-next/\",\"target\":\"_blank\"},{\"text\":\"官方库v2\",\"link\":\"\"},{\"text\":\"bin-ui\",\"link\":\"https://wangbin3162.github.io/bin-ui/\",\"target\":\"_blank\"},{\"text\":\"bin-ace-editor\",\"link\":\"https://wangbin3162.github.io/bin-ace-editor/\",\"target\":\"_blank\"},{\"text\":\"bin-charts\",\"link\":\"https://wangbin3162.github.io/bin-charts/\",\"target\":\"_blank\"},{\"text\":\"bin-tree-org\",\"link\":\"https://wangbin3162.github.io/bin-tree-org/\",\"target\":\"_blank\"},{\"text\":\"动画库\",\"link\":\"\"},{\"text\":\"bin-animation\",\"link\":\"https://wangbin3162.github.io/bin-animation/\",\"target\":\"_blank\"},{\"text\":\"bin-keyframe-animation\",\"link\":\"https://wangbin3162.github.io/bin-keyframe-animation/\",\"target\":\"_blank\"}]}],\"sidebar\":{\"/docs/\":[{\"text\":\"开始\",\"items\":[{\"text\":\"介绍\",\"link\":\"/docs/introduction\"},{\"text\":\"变更日志\",\"link\":\"/docs/changelog\"}]},{\"text\":\"快速上手\",\"items\":[{\"text\":\"安装\",\"link\":\"/docs/installation\"},{\"text\":\"在 SFC 中使用\",\"link\":\"/docs/usage-sfc\"},{\"text\":\"按需引入\",\"link\":\"/docs/import-on-demand\"}]},{\"text\":\"指南\",\"items\":[{\"text\":\"JSX & TSX\",\"link\":\"/docs/jsx\"},{\"text\":\"色彩设计\",\"link\":\"/docs/color-design\"},{\"text\":\"调整主题\",\"link\":\"/docs/custom-theme\"},{\"text\":\"通用样式\",\"link\":\"/docs/common-css\"},{\"text\":\"帮助函数\",\"link\":\"/docs/common-api\"},{\"text\":\"组件指令\",\"link\":\"/docs/common-directive\"},{\"text\":\"内置动画\",\"link\":\"/docs/common-transition\"}]}],\"/components/\":[{\"text\":\"通用组件 (8)\",\"items\":[{\"text\":\"<i class=\\\"b-iconfont b-icon-fire\\\"></i>图标<span>Icon</span>\",\"link\":\"/components/icon\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-Youtube\\\"></i>按钮<span>Button</span>\",\"link\":\"/components/button\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-creditcard\\\"></i>卡片<span>Card</span>\",\"link\":\"/components/card\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-interation\\\"></i>折叠面板<span>Collapse</span>\",\"link\":\"/components/collapse\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-line\\\"></i>分割线<span>Divider</span>\",\"link\":\"/components/divider\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-caret-down\\\"></i>下拉菜单<span>Dropdown</span>\",\"link\":\"/components/dropdown\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-tags\\\"></i>标签<span>Tag</span>\",\"link\":\"/components/tag\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-image\\\"></i>图片<span>Image</span>\",\"link\":\"/components/image\"}]},{\"text\":\"布局组件 (4)\",\"items\":[{\"text\":\"<i class=\\\"b-iconfont b-icon-layout\\\"></i>布局组件<span>Layout</span>\",\"link\":\"/components/layout\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-appstore\\\"></i>栅格<span>Grid</span>\",\"link\":\"/components/grid\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-swap\\\"></i>间距<span>Space</span>\",\"link\":\"/components/space\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-block\\\"></i>分割面板<span>Split</span>\",\"link\":\"/components/split\"}]},{\"text\":\"数据录入组件 (14)\",\"items\":[{\"text\":\"<i class=\\\"b-iconfont b-icon-edit-square\\\"></i>输入框<span>Input</span>\",\"link\":\"/components/input\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-shake\\\"></i>数字输入<span>InputNumber</span>\",\"link\":\"/components/input-number\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-plus-circle\\\"></i>单选框<span>Radio</span>\",\"link\":\"/components/radio\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-check-square\\\"></i>多选框<span>Checkbox</span>\",\"link\":\"/components/checkbox\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-build\\\"></i>开关<span>Switch</span>\",\"link\":\"/components/switch\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-unorderedlist\\\"></i>选择器<span>Select</span>\",\"link\":\"/components/select\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-pic-left\\\"></i>级联选择<span>Cascader</span>\",\"link\":\"/components/cascader\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-calendar\\\"></i>日期选择器<span>DatePicker</span>\",\"link\":\"/components/date-picker\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-time-circle\\\"></i>时间选择器<span>TimePicker</span>\",\"link\":\"/components/time-picker\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-bg-colors\\\"></i>颜色选择器<span>ColorPicker</span>\",\"link\":\"/components/color-picker\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-star\\\"></i>评分<span>Rate</span>\",\"link\":\"/components/rate\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-minus\\\"></i>滑块<span>Slider</span>\",\"link\":\"/components/slider\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-cloud-upload\\\"></i>上传<span>Upload</span>\",\"link\":\"/components/upload\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-reconciliation\\\"></i>表单<span>Form</span>\",\"link\":\"/components/form\"}]},{\"text\":\"数据展示组件 (9)\",\"items\":[{\"text\":\"<i class=\\\"b-iconfont b-icon-branches\\\"></i>树结构<span>Tree</span>\",\"link\":\"/components/tree\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-table\\\"></i>表格<span>Table</span>\",\"link\":\"/components/table\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-read\\\"></i>分页<span>Page</span>\",\"link\":\"/components/page\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-unorderedlist\\\"></i>描述<span>Desc</span>\",\"link\":\"/components/desc\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-arrowdown\\\"></i>时间线<span>Timeline</span>\",\"link\":\"/components/timeline\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-calendar-fill\\\"></i>日历<span>Calendar</span>\",\"link\":\"/components/calendar\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-appstore-fill\\\"></i>轮播<span>Carousel</span>\",\"link\":\"/components/carousel\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-orderedlist\\\"></i>数字动画<span>CountTo</span>\",\"link\":\"/components/count-to\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-caret-up\\\"></i>趋势标记<span>Trend</span>\",\"link\":\"/components/trend\"}]},{\"text\":\"导航组件 (8)\",\"items\":[{\"text\":\"<i class=\\\"b-iconfont b-icon-pushpin\\\"></i>图钉<span>Affix</span>\",\"link\":\"/components/affix\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-attachment\\\"></i>锚点<span>Anchor</span>\",\"link\":\"/components/anchor\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-up\\\"></i>返回顶部<span>BackTop</span>\",\"link\":\"/components/back-top\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-right\\\"></i>面包屑<span>Breadcrumb</span>\",\"link\":\"/components/breadcrumb\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-minus\\\"></i>加载条<span>Loading Bar</span>\",\"link\":\"/components/loading-bar\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-menu\\\"></i>菜单<span>Menu</span>\",\"link\":\"/components/menu\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-project\\\"></i>标签页<span>Tabs</span>\",\"link\":\"/components/tabs\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-arrowright\\\"></i>步骤<span>Steps</span>\",\"link\":\"/components/steps\"}]},{\"text\":\"反馈组件 (13)\",\"items\":[{\"text\":\"<i class=\\\"b-iconfont b-icon-error-fill\\\"></i>警告信息<span>Alert</span>\",\"link\":\"/components/alert\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-border\\\"></i>标记<span>Badge</span>\",\"link\":\"/components/badge\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-idcard\\\"></i>模态框<span>Modal</span>\",\"link\":\"/components/modal\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-message\\\"></i>消息提示<span>Message</span>\",\"link\":\"/components/message\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-mail\\\"></i>弹框提示<span>MessageBox</span>\",\"link\":\"/components/message-box\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-notification\\\"></i>通知<span>Notice</span>\",\"link\":\"/components/notice\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-info-circle\\\"></i>弹出提示<span>Tooltip</span>\",\"link\":\"/components/tooltip\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-question-circle\\\"></i>弹出信息<span>Popover</span>\",\"link\":\"/components/popover\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-build\\\"></i>抽屉<span>Drawer</span>\",\"link\":\"/components/drawer\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-sever-fill\\\"></i>骨架屏<span>Skeleton</span>\",\"link\":\"/components/skeleton\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-loading\\\"></i>加载<span>Loading</span>\",\"link\":\"/components/loading\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-hourglass\\\"></i>进度条<span>Progress</span>\",\"link\":\"/components/progress\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-redo\\\"></i>进度环<span>Circle</span>\",\"link\":\"/components/circle\"}]},{\"text\":\"内置组件 (4)\",\"items\":[{\"text\":\"<i class=\\\"b-iconfont b-icon-border\\\"></i>空状态<span>Empty</span>\",\"link\":\"/components/empty\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-container\\\"></i>滚动组件<span>Scrollbar</span>\",\"link\":\"/components/scrollbar\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-pic-center\\\"></i>弹层<span>Popper</span>\",\"link\":\"/components/popper\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-menu\\\"></i>右键菜单<span>Contextmenu</span>\",\"link\":\"/components/contextmenu\"}]},{\"text\":\"配置组件 (1)\",\"items\":[{\"text\":\"<i class=\\\"b-iconfont b-icon-setting\\\"></i>全局配置<span>ConfigProvider</span>\",\"link\":\"/components/config-provider\"}]}]},\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://github.com/wangbin3162/bin-ui-design\"}],\"footer\":{\"copyright\":\"MIT Licensed | Copyright © 2023-present bin-ui-design\"}},\"locales\":{},\"scrollOffset\":90,\"cleanUrls\":false}");</script>
    
  </body>
</html>